とする。明示的な指定がない場合、画像の底辺とテキストの行があうよう表示される。
はじめに
このドキュメントは、World Wide Web で使われるマークアップ言語、
HTML によるドキュメント作成の入門書です。
なお、このドキュメントは、NCSA によって提供されている、 "A Begginer's Guide to HTML" を日本語訳したものです。 なお、一部省略してあるところや、書き加えたところなどもありますので、御了承ください。
なお、翻訳の間違いの指摘、用語の不適切な使用など、質問や意見がございましたら、
t93287nt@sfc.keio.ac.jpまでメールでお願いします。
この入門書が提供していないこと
この入門書は、読者が以下のような条件を満たしていることを前提としている。
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の最大の利点は、テキストのある部分や画像から、
他のドキュメントの特定の場所や画像へリンクを張れることである。
リンクを持つ場所は、ブラウザ側で明示的に他のテキストとは違うスタイルで表示される。
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
http
gopher
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>出力される結果は、
となる。リストの前に表示される記号は、ブラウザによって決まる。
番号付きリスト(Ordered List)
番号付きのリストは <ol> タグで始まりを宣言する。
各アイテムは前のものと同じように <li> を頭につける。例えば、
<OL> <LI> oranges <LI> peaches <LI> grapes </OL>この結果は、
説明付きリスト(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>この出力結果は、
<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>
この結果は、
フォーマット済みテキスト
等幅のフォントを使って、空白やタブ、改行、空行などを正確に表示したい場合、
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 / pubs@ncsa.uiuc.edu </ADDRESS>となっている。結果は、
A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu
と出力される。
書体の設定
各単語、あるいは文章は特別な書体に設定できる。
ロジカルスタイルは、ブラウザ側が判断して書体を設定するものだ。
実際の書体の名前ではなく、その書体によって示したい意味を持つタグ名を使用する。
例えば、引用を意味する<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> 定義などをイタリック体で示す
< と > と & である。
< と > はタグを示すために使用され、
& は、以下のキャラクタやその他のキャラクタのための
エスケープシーケンスとなっている。
<; < のエスケープ・シーケンス
>; > のエスケープシーケンス
&; & のエスケープシーケンス
その他にも、8bitキャラクタをサポートするために以下のような エスケープシーケンスが用意されている。
注意: この文書は Shift-Jis コードで書かれているため、以下の例では正しく表示されない。
ö は、小文字のo のウームラート: &omul
ñ は、小文字の n のチルダ: ñ
È は、小文字の E のグレーブマーク: È
区切り線（ヘッドライン）
ブロックの区切りの線を表示したい場合、<HR>タグを用いる。
</HR>は必要なく、存在しない。
これを用いると、
注意:
<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形式である。
<h1>This is <a name="foo">不正なHTML.</h1></a>
現在、多くのHTML構文分析のプログラムは、不正なHTMLコードをあまり上手く扱えないため、
このような重ね合わせを持つ「ややこしい」構文を用いることは避けられている。
<img>タグで指定された画像が存在しない場合、
NCSA のロゴが代わりに表示される。（例を示すとこのサーバーのログが ERROR だらけになるので
割愛させて頂く。）このロゴが表示された場合、第一には、リンク先の画像が実際には存在しないか、 さもなければリンク元のドキュメントが間違えて記述されているという可能性がある。 そうでない場合、当該のファイルのパーミッションが正しく設定されていない可能性がある。 (world-readable になっている必要がある).
<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 (me@mycomputer.univ.edu)</address>
ここを押せば 実際にHTMLで書かれたこの文書を得られる。