HTML入門 (1994/2/8 改訂)

HTML入門

はじめに

このドキュメントは、World Wide Web で使われるマークアップ言語、 HTML によるドキュメント作成の入門書です。

なお、このドキュメントは、NCSA によって提供されている、 "A Begginer's Guide to HTML" を日本語訳したものです。なお、一部省略してあるところや、書き加えたところなどもありますので、御了承ください。

なお、翻訳の間違いの指摘、用語の不適切な使用など、質問や意見がございましたら、

[email protected]

までメールでお願いします。

WWW: World Wide Webの略。
SGML: Standard Generalized Markup Languageの略。これはおそらく、スタイルシートを記述するための最良のプログラミング言語である。
DTD: Document Type Definitionの略。文章型定義。 SGMLによる、特定の型を持つドキュメントの記述方法。
HTML: HyperText Markup Languageの略。HTMLとは、つまるところSGMLとDTDの事である。簡単にいえば、 HTMLは、World Wide Web用のドキュメントを記述するための、さまざまなスタイルをまとめたものである。

この入門書が提供していないこと

この入門書は、読者が以下のような条件を満たしていることを前提としている。

NCSA Mosaicか、その他のWWWブラウザに関する簡単な知識を持っている
World Wide Webサーバーとクライアントのブラウザの働きに関する一般的な知識を持っている
HTMLドキュメントを載せる、World Wide Webサーバーへアクセスできる

HTMLドキュメントの製作

HTMLドキュメントはプレーンテキストフォーマットで書かれるので、あらゆるテキストエディタ（例えば、UNIX上であれば emacs や vi など）で作成できる。いくつかのWWWブラウザ(X windows 上の tkWWW や、CERN の NeXT 用 WWW ブラウザなど) は、簡単なHTML編集機能を持っているため、これらのブラウザを試しに使ってみるのもいいだろう。

作成したHTMLドキュメントは、NCSA Mosaicや、その他のWWWブラウザの多くでプレビューできる。 Fileメニューにある、Open Local メニューをを使って開く。プレビューして、修正したい箇所が見つかったら、テキストエディタで直して、セーブしたものを、 Reloadすれば、修正が画面に反映される。

最小限のHTMLドキュメント

全てのHTMLドキュメントの基本となる、最小限のHTMLを使った例をあげる。

  <TITLE>The simplest HTML example</TITLE>

  <H1>This is a level one heading</H1>

  Welcome to the world of HTML.  
  This is one paragraph.<P>

  And this is a second.<P>

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

HTMLでは、タグ (札、目印といった意味)を使って、 World Wide Webブラウザにどのようにテキストを表示するか指定する。上にあげた例では、

ドキュメントの題名を示すための <TITLE> タグ (終わりには必ず </TITLE> をつける)
章を示すための <H1> ヘッダータグ (終わりには必ず </H1> をつける)
段落の終を示すための <P> タグ

が使われている。

HTMLのタグは < ではじまり、次にdirective と呼ばれる文字列が続き、> で終わる。また、タグは <H1> と </H1> のように必ず対になっている。終を示すタグは、始まりを示すタグにスラッシュ(/)を加えたものになっている。例えば、<H1> は、ブラウザに、第一レベルの見出しが始まることを教えるもので、また、 </H1>は、同様に、見出しが終ったことを教えるものである。

例外は、段落の終を示す <P> で、 </P>というものは存在しない。

注意: HTMLはアルファベットの大文字小文字を無視するため、 <title> を <TITLE> や <TiTlE> を記述しても意味は通じる。

全てのタグが全てのWorld Wide Webでサポートされているわけではない。そのため、対応していないタグをブラウザが発見すると、その部分を無視する。

題名(タイトル)

各HTMLドキュメントには題名(タイトル)を必要とする。タイトルは一般的にドキュメントとは別に表示され、主として、ある種の状況(例えば、WAIS の検索など)で、ドキュメントの識別に使用される。おおむね6語程度(今のところ英語で)で、ドキュメントの内容を簡潔に書くと良い。

NCSA Mosaic では、ドキュメントタイトルは、プルダウンメニューの下、スクリーンの一番上に表示される。

タイトルのためのタグは、<title> である。一般的にドキュメントの最初の行に記述される。

章(ヘッディング、セクション)

HTMLでは、ヘッディングのレベルが6段階ある。ヘッディングは普通の文章よりも大きく太いフォントで表示される。もっとも上のレベルのヘッディングを記述するには、 <H1> を使用する。ヘッディングの記述は以下のとおり。

   <Hy>Text of heading</Hy>

y には1～6までの数字が入る。

例えば、``Headings''というセクションのヘッディングは、

  <H3>Headings</H3>

になる。

タイトルとヘッディングの違い: 多くのドキュメント(この文章も含む)では、最初のヘッディングがタイトルと同じ役割を持っている。複数のパートに別れているドキュメントの場合、レベル1のヘッディングがタイトルの役割をはたし、タイトルタグはより広い範囲に渡る内容を示すものにするとよい。

段落(パラグラフ)

多くのワープロのドキュメントと違い、HTMLでは改行や空白を無視する。文章の改行はあらゆる場所で起こり、複数の空白(スペース)は1つの空白に修正される(<TITLE> 内は除く)。前にあげた例では、最初の段落は

  Welcome to HTML.
  This is the first paragraph. <P>

と記述されている。ここでは、2つの文章の間に改行コードが入っている。しかし、Webブラウザはこの改行コードを無視し、 <P>タグがくるまでは次の段落を作らない。

注意: 各段落は必ず <P> で終わらなければならない。ブラウザ側ではどんなインデントや空行を入れても無視する。 HTMLはタグによって全ての書式が決まるため、 <P> タグなしで文章を入力した場合は巨大な段落が出来上がる。 (例外に、``preformatted,''タグが付けられたものがある。説明はここ。) 例えば、以下の例は最初の例と同じ結果になる。

  <TITLE>The simplest HTML example</TITLE><H1>This is a level 
  one heading</H1>Welcome to the world of HTML. This is one 
  paragraph.<P>And this is a second.<P>

同じ結果になるとはいえ、HTMLのソースファイルを読みやすいものにするためにヘッディングは別の行に、そして段落は空行で区切るようにするべきである。

他のドキュメントへのリンク

HTMLの最大の利点は、テキストのある部分や画像から、他のドキュメントの特定の場所や画像へリンクを張れることである。リンクを持つ場所は、ブラウザ側で明示的に他のテキストとは違うスタイルで表示される。

NCSA Mosaicでは、リンクがはってあるテキストは色と下線が付けられる。デフォルトは、Option menu もしくは .Xdefaults で変更できる。

HTMLでのハイパーテキストリンクは、anchor(アンカー)の A で示される。ドキュメント内にアンカーを使用するには、

今までのタグと同じように、最初に < を入れ、そのあとに<a 、そして空白を一つ入れる。
リンク先のドキュメントを href="filename.html" で指定し、最後に < で閉じる
現在のドキュメントでリンクを張るテキストを入力する
最後に、アンカータグの終を示す </A> を入れる

以下に簡単な例をあげる。

  <a href="MaineStats.html">Maine</a>

この例では、Maineという単語をクリックすることで MaineStats.html というドキュメントへ移動することになる。

また、リンクを張る際、このようなテキストだけでなく、後述するドキュメント内画像（インライン・イメージ）をアンカーとして使用する事もできる。例えば、

  <a href="MaineStats.html"><img src="anchor.gif"></a>

とした場合、ドキュメント内画像として表示されている"anchor.gif"という画像が、 MaineStates.htmlというファイルに対するアンカーとして機能する。

Uniform Resource Locator(URL)

Uniform Resource Locator(URL)は、WWWにおいて、他のファイルを指すときに使用されるフォーマットである。具体的には、NCSA Mosaic の Open URL メニューで特定のドキュメントを呼び出す際や、リンクを張る際に、リンク先としてローカルのファイルではなく、他のサーバーにあるファイルを指定する時などに使用される表記方法である。

URLでは、アクセス先のリソースの種類とファイルまでのパスを記述する。書式は、

scheme://host.domain[:port]/path/filename

となる。 scheme には、

file: ローカルシステムや、anonymous FTPサーバーにあるファイルを指定するとき
http: World Wide Webサーバーにあるファイルを指定するとき
gopher: Gopherサーバー上のファイルを指定するとき
WAIS: WAISサーバー上のファイルを指定するとき

この他に、news や telnet などもあるが、上にあげたものほど使われることはない。一般的に、ポートナンバーをURLに書く必要は少ない。

例えば、このHTML入門のオリジナル（英語版)にリンクをはりたい場合は、

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

と記述すればいい。これで、 NCSA's HTML Primer というテキストをクリックすると、HTML入門のオリジナルの文章が表示される。

URLに関するもっと詳しい情報は、CERNで用意している Addressingドキュメントを参照していただきたい。 A Beginner's Guide to URLs はNCSA Mosaic Helpメニューに用意されている。

他のドキュメントの特定の場所へのリンク

アンカーは、他のドキュメントの特定部分へ移動するのにも使用できる。ドキュメントAからドキュメントBの特定部分にリンクを張りたい場合、ドキュメントBにあらかじめ名前の付いたアンカーを設定しておかなければならない。例えば、ドキュメントBに Jabberwocky という名前の付いたアンカーを加えたい場合、

  Here's <A NAME="Jabberwocky">some text</a>.

という具合に記述する。次に、ドキュメントAに今までのようにアンカーを記述する。ファイル名のあとに先ほどドキュメントBに書いた名前付きのアンカーを # を付けて記述する。

    This is my <A HREF="documentB.html#Jabberwocky">link</a>.

これで、ドキュメントAの link という単語をクリックすることでドキュメントBの some text という箇所へ移動できる。

同じドキュメント内の特定部分へのリンク

これもまったく同じように設定すればいい。ただし、ファイル名は必要なくなる。つまり、

	This is my <A HREF="#Jabberwocky">link</a>.

というようになる。

注意: NCSA Mosaic for Macintosh や、for X windows の Version1 など、いくつかのWWWブラウザでは、Backコマンドは同じドキュメント内のアンカーに関しては作用しない。これは、Backコマンドが一つ前のドキュメントへ戻るよう設定されているためだ。スクロールバーで戻るしかない。

その他のタグ

これまでの部分で、簡単なHTMLドキュメントは作成できるだろう。しかし、より細かい指定を行うためのタグも用意されている。

リスト（箇条書き）

HTMLでは番号無し、番号付き、そして説明付きのリストを設定できる。

番号無しリスト(Unnumbered List)

最初に <ul> でリストが始まることを宣言する
各リストアイテムの前に <li> タグを付ける(終を示すタグはない)
リストのアイテムを全て入力したあとに、最後に </ul> を記述する。

以下に簡単な例をあげる。

  <UL>
  <LI> apples
  <LI> bananas
  </UL>

出力される結果は、

apples
bananas

となる。リストの前に表示される記号は、ブラウザによって決まる。

番号付きリスト(Ordered List)

番号付きのリストは <ol> タグで始まりを宣言する。各アイテムは前のものと同じように <li> を頭につける。例えば、

  <OL>
  <LI> oranges
  <LI> peaches
  <LI> grapes
  </OL>

この結果は、

oranges
peaches
grapes

と出力される。

説明付きリスト(Descriptive List)

説明付きリスト、つまり用語説明の場合、その用語と説明からなる。

以下に例をあげる。

  
  <DL>
  <DT> National Center for Supercomputing Applications
  <DD> NCSA is located on the campus of the University 
  of Illinois at Urbana-Champaign. NCSA is a one of 
  four member institutions in the National Metacenter for 
  Computational Science and Engineering.
  <DT> Cornell Theory Center
  <DD> CTC is located on the campus of Cornell 
  University in Ithaca, New York. CTC is another member 
  of the National Metacenter for  Computational Science 
  and Engineering.
  </DL>

この出力結果は、

National Center for Supercomputing Applications: NCSA is located on the campus of the University of Illinois at Urbana-Champaign. NCSA is a one of four member institutions in the National Metacenter for Computational Science and Engineering.
Cornell Theory Center: CTC is located on the campus of Cornell University in Ithaca,New York. CTC is another member of the National Metacenter for Computational Science and Engineering.

というようになる。 <DT> と <DD> は段落やその他のリストなどの記述を中に含むことができる。

階層リスト

リストは自分自信のなかに別のリストを内包することができる。また、複数の段落や、その段落のなかにリストを持つことも可能である。

階層リストの例を以下に示す。

  <UL>
  <LI> A few New England states:
    <UL>
    <LI> Vermont
    <LI> New Hampshire
    </UL>
  <li> One Midwestern state:
    <UL>
    <LI> Michigan
    </UL>
  </UL>

この結果は、

A few New England states:
- Vermont
- New Hampshire
One Midwestern state:
- Michigan

となる。

フォーマット済みテキスト

等幅のフォントを使って、空白やタブ、改行、空行などを正確に表示したい場合、 pre タグを使用する。これは、プログラムのリストを表示する場合などに便利だ。

<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 *

拡張注釈

注釈をスクリーンの別ブロックに表示したい場合は、<blockquote> と </blockquote>を使用する。

例えば、

  <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ドキュメント内にそのドキュメントの作者が誰であるか、そしてその連絡先を示すのに使用される。一般的に、ファイルの最後に記述され、イタリックで表示される。

例えば、このHTML入門のオリジナルドキュメントには、

  <ADDRESS>
  A Beginner's Guide to HTML / NCSA / [email protected]
  </ADDRESS>

となっている。結果は、

A Beginner's Guide to HTML / NCSA / [email protected]

と出力される。

書体の設定

各単語、あるいは文章は特別な書体に設定できる。

ロジカルスタイルは、ブラウザ側が判断して書体を設定するものだ。実際の書体の名前ではなく、その書体によって示したい意味を持つタグ名を使用する。例えば、引用を意味する<CITE>は、通常の場合イタリック体で表示される。

書体の設定にはもう一つ方法があり、こちらはフィジカルスタイルと呼ばれている。例えば、イタリック体の場合は <I> タグを使用する。

HTMLドキュメントの場合、なるべくロジカルスタイルを用いるべきである。将来的にフィジカルスタイルがHTMLでサポートされなくなる可能性がある。

イタリック（斜体）
- <I>text</i> は、テキストをイタリックで表示する　(HTML入門)
- <em>text</em> これもイタリックになる (only one viewer)
- <cite>text</cite> は、引用を行う時に用いる (HTML入門)
- <var>text</var> は、変数を示す時に使う (filename)
ボールド（太字）
- <b>text</b> は、テキストをボールドで表示する (重要)
- <strong>text</strong> は、テキストを強調したいときに用いる (注意:)
等幅フォント
- <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)コードの中の3つのキャラクタは HTMLでは特別な意味を持つため、そのままでは使用できない。 3つのキャラクタとは、< と > と & である。

< と > はタグを示すために使用され、 & は、以下のキャラクタやその他のキャラクタのためのエスケープシーケンスとなっている。

<; < のエスケープ・シーケンス
>; > のエスケープシーケンス
&; & のエスケープシーケンス

エスケープシーケンスとは、各キャラクタを表示するために必要な文字列であり、それぞれ ; が必ず必要。

その他にも、8bitキャラクタをサポートするために以下のようなエスケープシーケンスが用意されている。

注意: この文書は Shift-Jis コードで書かれているため、以下の例では正しく表示されない。

ö は、小文字のo のウームラート: &omul
ñ は、小文字の n のチルダ: ñ
È は、小文字の E のグレーブマーク: È

このようなエスケープシーケンスに関しては、CERNからリストが提供されているのでそちらを参照していただきたい。

区切り線（ヘッドライン）

ブロックの区切りの線を表示したい場合、<HR>タグを用いる。 </HR>は必要なく、存在しない。

これを用いると、

このような線が表示される。

ドキュメント内画像表示（インライン・イメージ）

NCSA MosaicはX Bitmap(XBM)やGIFフォーマットの画像をドキュメント内に表示できる。 各画像は処理に時間がかかり、ドキュメント全体を表示するまでの速度を遅くする。 一つの画像を複数回使用するようにすることで、この問題は多少回避できる。

注意: <img> タグは、NCSA Mosaic で最初に実装された HTML エクステンションなので、今のところ、他の多くの World Wide Web ブラウザでは、認識されない場合が多い。

文章中に画像を表示するには、

    <IMG SRC="filename.GIF">

とする。明示的な指定がない場合、画像の底辺とテキストの行があうよう表示される。

これに align=top を加えることで、画像の上の部分を行にあわせるよう表示できる。

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

もし、画面のほぼ全体を埋めるような画像を表示する場合は、画像パラメータを記述する前に <p>

で段落を新しくしておく。また、表示したあとも <p> で段落を変える。

外部画像・音声・動画へのリンク

画像や音声、動画などを、個別のドキュメントとしてある文章からリンクを張りたい場合に、リンク先として、テキストと同じようにそれらのファイルを指定する事ができる。以下のように指定する。

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

この場合、link anchor をクリックする事で、filename.gifが表示される。

NCSA Mosaic や多くのWWW ブラウザでは、これらの形式のファイルを表示・再生する際、外部のアプリケーションを利用する。例えば、TIFF フォーマットの画像であれば、 Mosaic for X windows では、デフォルトでは XV が、Mosaic for Macintosh では、デフォルトで Jpeg-View が呼び出されるので、これらのアプリケーションが存在しない場合、これらのファイルを表示・再生することはできない。
また、特に音声はハードウェアが対応していなければ再生できない。

扱える画像フォーマットは、GIF、TIFF、JPEG、RGB、HDF 形式である。

扱える音声フォーマットは、SUN AU、8bit u-law 形式である。

扱える動画フォーマットは、MPEG形式である。

トラブル・シューティング

HTML のタグはネストすることができる(例えば、ヘッダーの中にアンカーを作る事ができる)が、重ねあわせることはできない。以下の例は、HTMLドキュメントとしては間違っている。
```
    <h1>This is <a name="foo">不正なHTML.</h1></a>
```
現在、多くのHTML構文分析のプログラムは、不正なHTMLコードをあまり上手く扱えないため、このような重ね合わせを持つ「ややこしい」構文を用いることは避けられている。
NCSA Mosaic for X windows では、<img>タグで指定された画像が存在しない場合、 NCSA のロゴが代わりに表示される。（例を示すとこのサーバーのログが ERROR だらけになるので割愛させて頂く。）
このロゴが表示された場合、第一には、リンク先の画像が実際には存在しないか、さもなければリンク元のドキュメントが間違えて記述されているという可能性がある。そうでない場合、当該のファイルのパーミッションが正しく設定されていない可能性がある。 (world-readable になっている必要がある).

長めのHTMLドキュメントの例

次に、それなりに長いHTMLドキュメントの例を示す。

  <TITLE>長めのHTMLドキュメントの例</TITLE>
  <H1>長めのHTMLドキュメントの例</H1>

  これは最も単純なHTMLドキュメントである。これが最初の段落。<P>

  これは第２段落である。ここではいくつかの特別なタグを用いてみる。これが<I>斜体</I>。
  これは<B>太字</B>。そしてここにはインラインの GIF 画像を示す: <IMG SRC="TestImage.gif">  <p>

  これは第３段落である。いくつかリンクの例を示す。ここには、"HTMLPrimer/testoflink.html" 
  というファイルへの、<HREF="Subdir/testoflink.html">試しのハイパーテキストリンク
  </a>を作ってある。(実際には存在しないファイルなので、もしここをクリックした場合、
  エラーメッセージが表示される)<P> 

  <H2>第２レベルのヘッダー</H2>

  ここでは、等幅フォントで表示されるテキストの例を示す。<P>

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

  次は、２つの要素を持つ、番号なしリストである。 <P>

  <UL>
  <LI> みかん
  <LI> りんご
  </UL>

  以上でこの例文は終わりである。  <P>

  <address>Me ([email protected])</address>

ここを押せば実際にHTMLで書かれたこの文書を得られる。

他の情報源

HTMLに関する他の情報源は、以下のリストを参照して欲しい。それぞれそのドキュメントへのリンクを設定してある。

英語によるもの
- HTML 構文の総合リスト HTML Quick Reference Guide
- HTML の公式ドキュメント
- HTML の改良中の項目に関するRFC (Request for Comments)
- SGML についての説明
- URLについての説明
- オンライン・ハイパーテキスト・ドキュメントの構造についてのスタイルガイド
日本語によるもの
- 超簡略版HTML入門

A Beginner's Guide to HTML/ NCSA / [email protected]

日本語化 --- Media Farm / 慶應大学湘南藤沢キャンパス / 矢坂健司([email protected]), 遠山緑生([email protected])

HTML入門

目次

リスト（箇条書き）

番号無しリスト(Unnumbered List)

拡張注釈

アドレス

特殊文字

ドキュメント内画像表示（インライン・イメージ）

トラブル・シューティング

長めのHTMLドキュメントの例

他の情報源