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で文書を作成する方法について述べます。
ドキュメントの preview には WWW ブラウザが使える。 FileメニューからOpen Localを選ぶ。 開いたウィンドウでFilterやDirectories、 Filesを駆使し、 あるいはName of local document to openにタイプする。 OKボタンを押してしばし待て。HTML 文章を書き直したらセーブして、Reloadせよ。
<TITLE>最も単純な HTML 文書の例</TITLE> <H1>これはレベル1の見出しである</H1> Hello WWW World. これが最初の段落である。<P> こっちは2つ目の段落。<P>
でき上がりの文書はここをクリックすると見られる。
HTML は tags を使ってWWW viewer に表示方法を指示する。 この例文では
<TITLE>
命令から対応する </TITLE>
命令の間に文書の表題を書く。
<H1>
命令から対応する </H1>
命令の間にヘッダを書く。
<P>
命令で段落の終りを示す。
<
」と「>
」の間に
命令 (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 に於いては改行やホワイトスペースに大した意味がない。
重要事項: <P>を書かないと、(あなたがどんな改行・インデントを施そうとも) 巨大な段落になってしまう。 これには例外がある。<PRE>.) がその一つである。次の記述がどうなるか、考えてみると良い。
- 改行
- HTML 文書における改行は単なるホワイトスペースである。
- あなたの改行とは無関係に、 クライアントは任意の箇所でword wrapする。
- 段落の終了は以下のように<P>で示す。
HTMLもなかなか楽しい。 おっと、ここが最初の段落だぜ.<P> あらよっと。すると
HTMLもなかなか楽しい。 おっと、ここが最初の段落だぜ。あらよっと。
となる。- ホワイトスペース
- <TITLE>では、あなたが書いた通りに表示される。
- それ以外の場所では、 連続するホワイトスペースは1つの区切りである。
<TITLE>最も単純なHTMLの例</TITLE><H1>これが一番の見出し </H1>毎度お馴染みの例である。ここで1つ目の段落が終る。<P> んでもって、こいつが2つ目、と。<P>
もちろん、<Hy>を独立した行にしたり、 段落を空行で区切ったりすること自身は良い習慣である。
他の文書へのハイパーリンク
ハイパーリンク
によって文章中の特定の箇所から他の文書や画像・音声を参照できる。
これはHTMLの最も重要な機能である。
表示方法を変えて、
ハイパーリンクが張られていることを示すことが多い。
NCSA Mosaicは色を変え、 下線を施してリンクを示すのがデフォルトである。 デフォルトは「Option menu」や.Xresourcesファイルで変更できる。HTMLでハイパーテキスト関連の指示には
A
(anchorの略)を使う。
例えば、他の文章へハイパーリンクを張るには:
<A
」と書き、空白を開ける。
>
を
書く。
href="filename.html" >
といった風に。
</A>
を書く。書き忘れ易いので注意。
<a href="MyCity.html">私の街</a>これで ``私の街'' の箇所からMyCity.html へのハイパーリンクが張れた。
URL(Uniform Resource Locator)
URLはWWWで用いられる形式で、
世界中にあるHTML文書その他を指示できる。
URLにはアクセス方法(gopherとかWAISとか)とファイルの場所を書く。
形式は以下の通り。
アクセス法://ホスト名.ドメイン名[:ポート]/パス名/ファイル名アクセス法の主なものは以下の通り。
file
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の 「ハイパーリンクで指される箇所」が現れる。
NCSA Mosaicではハイパーリンクで同じ文書内で移動した後、 Backボタンを押しても元の箇所には戻らない。 戻るにはスクロールバーを使うしかない。 Version 2.0では、Backを押すと文章の先頭に戻る。
<ul>
で単純なリストが始まる。
UL
は``Unnumberd List''の略である。
<lI>
の次に書く。
項目の終りは特に指示しない。
</ul>
で終る。
<UL> <LI> リンゴ <LI> バナナ </UL>と書くと
リストの実際の表示は利用しているプログラムに依存する。 「・」で項目を示す代わりに「●」や「−」を使うかも知れない。
箇条書
箇条書には<OL>
を使う。
OL
は``Ordered List''の略である。
書き方は単純なリストの<UL>
を
<OL>
に読み変えれば良い。
<LI>
の使い方は同じ。
例を示そう。
<OL> <LI> 桃 <LI> 栗 <LI> 三年 </OL>は以下のようになる。
見出しつきリスト
見出しつきリストには<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>とすると以下のように表示される。
<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@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>
は定義をイタリックで表示する。
<
)、右角括弧(>
)、
そしてアンパサント(&
)である。不等号は(上で示したように)HTMLの指示を示すのに用いられ、 アンパサント(&)はこれらや他の文字のエスケープに用いられる:
<
は <
を表す。
>
は >
を表す。
&
は &
を表す。
他にもエスケープシーケンスがあって、 8-bit キャラクタセット(ISO 8859-1)もサポートしている。
ただし現在のところ、日本語との共存は難しい。 この下のリストにLatin-1 が表示されていたらあなたの使っているプログラムは偉い。(三浦注)例えば:
ö
で、
小文字の o
にウムラウトが付く: ö
ñ
で、
小文字の n
にチルダが付く: ñ
È
で、
大文字の E
にグレーブマークが付く: È
インライン画像
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 フォーマットの画像が利用できる。
困った時には
<h1>これは <a name="foo">間違った HTML</h1></a>現在の多くのWWWプログラムは間違ったHTMLを扱うのが苦手なので、 どうなるかわかったものではない。
<img>
で
指示された画像がなかったりサーバから得られなかったりした場合、
NCSAロゴが代わりに出る。
例えば、
<img href="DoesNotExist.gif">
(ここで"DoesNotExist.gif" は存在しないファイル)
とすると下記のようになる:
こうなったら、その参照された画像が実際に存在しているか、 そのハイパーリンクが正しいかを確認すべきである。 ファイルのパーミッションが正しくセットされているか確認する (world-readable:誰でも読める事)。
<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に関する 情報は、
以下のハイパーリンクで得られる。