第1部 HTML入門

1.HTML文書の作成

 HTML文書はプレーンなテキストファイルで、一般的なテキストエ
ディタを使って作成します。また、X-Window用のtkWWWのようにWWW
ブラウザ(表示プログラム)と組み合わされたエディタや、HotMetal
やマッキントッシュ上のHTML EditorのようなWYSIWYG環境をもつエ
ディタもあります。一番使いやすいものを使って作成するのがよい
でしょう。
 また、文書整形システムであるLaTeX、文書構造記述言語である
SGML、文書データ交換用のRTF形式のファイルなどからHTML形式に変
換するツールもあります。これを利用してもよいでしょう(ただし、
日本語が含まれる場合、うまく変換できないこともあります)。ま
た、HTMLの構文チェックをするプログラムとしてweblintもあります。

HTMLファイルを作成した後は、モザイクなどのWWWブラ
ウザを使って、HTMLファイルをプレビューしてください。
FileメニューのOpen Localコマンドを使えば、ディスク
に保存されているファイルをプレビューできます。
また、ファイルを変更したら、Reload(再表示)コマン
ドでプレビュー画面を更新できます。

1.1 最小のHTML文書

 一番単純なHTML文書の例をつぎに示します。

  <TITLE>シンプルなHTML文書の例</TITLE>
  <H1>これはレベル1の見出しです</H1>
  HTMLの世界にようこそ。
  これは1番目の段落です。<P>
  そしてこれは2番目の段落です。<P>
ここをクリックして、上記の例を書式づけした結果を見てください。

 HTMLは、テキストを表示する方法をWWWブラウザに伝えるために
「マークアップタグ(markup tags)」という記号を使います。上記
の例で使われているものとして、

 HTMLのタグは、小なり記号(<)で始まり、つぎにタグ名が続き、
大なり記号(>)で閉じる構成をとります。タグは、ほとんどの場合
ペアになっており、終わりのタグはスラッシュ(/)で始まります。
たとえば、<H1>では、終わりのタグは</H1>といったようになり、こ
のタグに囲まれた文が見出しとなります。

 ペアになっていないタグに、<P>(段落)があります。終わりのタ
グである、</P>はありません。

注意:HTMLのタグは大文字と小文字の区別はありません。<title>
<TITLE>または<TiTlE>でもまったく同等です。ですが、タグが目
立つように大文字で書くのがよいでしょう。

 なお、すべてのタグがあらゆるWWWブラウザでサポートされている
という保障はありません。ブラウザによっては一部のタグがサポー
トされていない場合があり、その場合は、そのタグは無視され、文
書として扱われることになります。

1.2 基本タグ

●タイトル

 すべてのHTML文書はタイトルが必要です。一般的に、タイトルは
文書とは別の場所に表示されます。文書を端的に示す言葉で表して
ください。

NCSA Mosaic(X Window版)では、タイトルが画面の上
でプルダウンメニューの下のDocument Titleフィール
ドに表示されます。ウィンドウズ版やマッキントッシュ
版では、タイトルバーに表示されます。

●見出し

 HTMLは「見出し1」から「見出し6」までの6つのレベルの見出しを
もち、「見出し1」が一番大きな見出しです。見出しは本文よりも大
きく、太文字のフォントで表示されます。各文書の最初の見出しは
<H1>というタグでくくります。見出しの文法はつぎのようになりま
す。

  <Hy>Text of heading </Hy>

yは1から6までの間の数字で、見出しのレベルを表します。


 それぞれの見出し例をつぎに示します。

This is 1 level.

This is 2 level.

This is 3 level.

This is 4 level.
This is 5 level.
This is 6 level.
 また、見出しの中に後述の文書やリストなどを含めることもでき
ます。たとえば、つぎのようになります。

  1. 野球
  2. サッカー
  3. テニス

 なお、このタグはフォントの大きさを変更するために使う場合も
あります。構造をもつ文章として見た場合、使い方としては誤りで
すが、他に方法がないためこのタグを使うしかありません。


●段落

 HTMLでは多くのワープロとは違い、段落や改行にはタグが必要と
なります。段落を変更する場合には<P>タグを使います。このタグは、
複数の空行が段落間に入ります。例としてはつぎのようになります。
改行(CRやLFなど)はHTMLとしては特に文書的な効果はありません
ので、2行目の部分で段落変更が起こります。

 HTMLの世界にようこそ。
 これは1番目の段落です。<P>
重要:HTML文書では、改行はタグを使って明示的に示さなければな
らないので、つぎのような文章を書いても前の例とまったく同じよ
うに表示されます。前の文章例は編集する場合に見やすく改行して
いるだけでしかありません。

 <TITLE>シンプルなHTML文書の例</TITLE><H1>これは
 レベル1の見出しです</H1>HTMLの世界にようこそ。これは1番目の段落
 です。<P>そしてこれは2番目の段落です。<P>
<Hy>(見出し)の中で<P>を使うこともできます。

補足:HTML+では、段落の範囲を決められるようにつぎのように変更
することを考えています。

  <P>
  これはHTML+での段落です。
  </P>
 また、このような構成とすることで、段落全体に対する効果を設
定できます。たとえば、段落を中央寄せ(センタリング)したい場
合、つぎのように指定します。

  <P ALIGN=CENTER>
  これは中央寄せの段落です。これはHTML+の記述方法で、まだ利用できません。
  </P>
 

1.3 他の文書へのリンク

 HTMLの素晴らしい点は他の文書へのリンク(ハイパーテキスト)
が可能な点です。ブラウザはハイパーテキストリンクを行うことを
示す部分を強調します(通常、色をつけたり下線が引かれていたり
します)。

 HTMLのハイパーテキスト関連タグは<A>で、アンカー(錨)と呼び
ます。アンカーはつぎのように使います。

  1. アンカーは<Aで始めます(Aの後に空白が必要です)。
  2. パラメータ「HREF="filename"」によってハイパーリンク先の文
    書名を指定し、大なり記号(>)で閉じます。
  3. ハイパーリンク先を示す部分のテキストを入力します。
  4. 最後にアンカータグを</A>で終了します。

 たとえば、

  <A HREF="MaineStates.html">Maine</A>
 このエントリは「Maine」に文書MaineStates.htmlへのハイパーリ
ンクが作られます。MaineStates.htmlファイルはこの文書と同じデ
ィレクトリに置かれなければなりません。別のディレクトリに置く
場合は、この文書からの相対パスで指定できます。たとえば、ファ
イルNJStates.htmlの文書がサブディレクトリAtlanticStatesに置
かれた場合、つぎのようになります。

  <A HREF="AtlanticStates/NJStates.html">NJStates</A>
 また、相対パス名ではなく絶対パス名でも指定できます。このパ
ス名は、WWWサーバーによって指定方法が異なります。

●URL(Uniform Resource Locator)

 World-Wide WebはUniform Resource Locators(URLs)と呼ばれる
表現で、他のWWWサーバーにあるファイルの場所を統一的に指定でき
ます。URLは資源のタイプも含んでおり、WWW以外の資源(たとえば、
Gopher、WAIS、FTP)へのアクセスを(プロトコル)可能にしていま
す。URLの文法はつぎのとおりです。

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

schemeはつぎのうちのどれかです。

file
ローカルシステム上またはAnonymous FTP上のファイル
ftp
Anonymous FTP上のファイルです。
http
World-Wide Webサーバー上のファイル
gopher
Gopherサーバー上のファイル
WAIS
WAISサーバー上のファイル
news
ニュースグループ
telnet
TELNETによるホストへの接続

portはサーバーへの接続に使うポート番号です。何も指定しなけれ
ば、それぞれのプロトコルについてのデフォルト値が使われます。

 たとえば、別のWWWサーバー上のファイルを参照する場合、つぎの
ように指定します。

  <A HREF="http://www.ncsa.uiuc.edu/Generalmaru/Internet/WWW/HTMLPrimer.html">
  NCSA's Beginner's Guide to HTML</A>

●他の文書の指定した場所(見出し)へのリンク

 アンカーは文書の特定の場所に移動する場合にも利用されます。
文書Aから文書Bの途中にある見出しにジャンプするハイパーリンク
を作る場合、まず文書Bにアンカーで名前づけをしておきます。たと
えば、「Jabberwocky」という名前で参照する場合、つぎのように設
定します。

  This is document B.Here's <A NAME = "Jabberwocky">some text</A>
 そして、文書Aで、リンクされる文書名、シャープ記号(#)、文
書Bのアンカーでつけた名前でリンクを指定します。

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

●現文書の指定した場所(見出し)へのリンク

 同じ文書内の別の場所に移動する場合は、文書名は必要なくシャ
ープ記号(#)と名前で指定します。たとえば、つぎのように使いま
す。

  This is <A HREF = "#Jabberwocky">Jabberwocky link</A>from within Document B.
 

2.マークアップタグ

2.1 リスト

 HTMLには、番号なし、番号つき、定義型の3つのリストがあります。

●番号なしリスト

 番号なしリストを作成するには、つぎのようにします。

  1. <UL>タグで始めます。
  2. 個々のアイテムは<LI>タグの後に続きます(</LI>は必要ありま
    せん)。
  3. リストの最後は</UL>タグで終わります。

 2つのアイテムの場合の例を下に示します。

  <UL>
  <LI> りんご
  <LI> バナナ
  </UL>
 出力はつぎのようになります。

 1つのアイテム内に複数の段落を設ける場合は<P>を使って分割し、
改行する場合には<BR>を使って分割します。

●番号つきリスト

 番号つきリストの場合は、番号なしリストで使われたタグ<UL>
代わりに<OL>を使います。アイテムを表すタグは<LI>で同じです。

  <OL>
  <LI>蜜柑
  <LI>桃
  <LI>葡萄
  </OL>
 出力はつぎのようになります。

  1. 蜜柑
  2. 葡萄

●定義型リスト

 定義型リストは、用語(DT)と定義(DD)から構成されます。つ
ぎが定義型リストの例です。

  <DL>
  <DT> NCSA
  <DD> NCSA, the National Center for Supercomputing Applications,
    is located on the campus of the University of Illinoisat Urbana-
    Champaign. NCSA is one of the participants 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 participant in the National MetaCenter for
    Computational Science and Engineering.
  </DL>
 表示はつぎのようになります。

NCSA
NCSA, the National Center for Supercomputing
Applications, is located on the campus of the University
of Illinois at Urbana-Champaign. NCSA is one of the
participants 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 participant in the
National MetaCenter for Computational Science and
Engineering.

<DT><DD>は複数の段落でもかまいません。段落を分ける場合は、
<P>を使います。

●リストの入れ子

 リストは入れ子にできます。ただし、入れ子は3レベルまでしかで
きませんので注意してください。どのリストも入れ子は可能です。

 つぎに入れ子リストの例を示します。

  <UL>
  <LI> 東京都
    <UL>
    <LI> 千代田区
    <LI> 港区
    </UL>
  <LI> 横浜市
    <UL>
    <LI> 緑区
    </UL>
  </UL>
 表示するとつぎのようになります。

2.2 整形ずみテキスト

 固定幅フォントでスペース、改行、タブを有効にしたテキストを
生成するために<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 *
 もちろん、<PRE>の中でハイパーリンク(アンカー)を使うことも
できます。ただし、HTMLでの特殊文字である<,>や&などは特殊記号
として扱われるため、これらの文字は、エスケープシーケンス記号
を使って表されなければなりません。

2.3 引用文

 画面上で分割されたブロックの中で引用文を含めるために
<BLOCKQUOTE>を使います。多くのブラウザでは、この部分は、イン
デントされて表示されます。

 たとえば、

  <BLOCKQUOTE>
  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>
とした場合、その結果はつぎのようになります。

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.

2.4 アドレス

 <ADDRESS>は一般に文書の作成者や作成者のコンタクト先(電子メ
ールアドレス)を示すために使われます。これは、一般に文書の最
後に置きます。

 たとえば、つぎのような行の場合、

  <ADDRESS>
  HTML入門 / KDD / www-admin@lab.kdd.co.jp
  </ADDRESS>
 結果はつぎのようになります。

HTML入門 / KDD / www-admin@lab.kdd.co.jp

注意:<ADDRESS>は住所の意味ではありません。

3.文字の修飾

3.1 論理型タグと物理型タグ

 個々の文字には特別な修飾をつけることができます。この修飾に
は、論理型と物理型の2つのタイプがあります。論理型タグはその単
語の意味づけを表したもので、物理型タグではフォントの指定にな
ります。文字を修飾する際には、できるだけ論理型のタグを使った
ほうがいいでしょう。

●論理型タグ

★ここはほぼ全部

<DFN>
定義された単語で、イタリック体で表示されます。
<EM>
強調文字で、イタリック体で表示されます。(Watch out for
pickpockets)
<CITE>
本やフィルムのタイトルで、イタリック体で表示されます。
(A Bignner's Guide to HTML)
<CODE>
コンピュータプログラムの抜粋などで、固定幅フォントで表
示されます。(<stdio.h>)
<KBD>
キーボードのキーを表し、固定幅フォントがボールド体で表
示されます。
<SAMP>
コンピュータ状態メッセージを表し、固定幅フォントで表示
されます。(Segmentation fault: Core dumped.
<STRONG>
強調文字で、ボールド体で表示されます。(Important)
<VAR>
変数等で使い、イタリック体で表示されます。★rmのみkbd
(rm filenameはファイルを削除します)

●物理型タグ

<B>
ボールド体(太文字)
<I>
イタリック体(斜体)
<TT>
タイプライタ(固定幅フォント)
<U>
アンダーライン

3.2 文字タグの使い方

 論理型タグと物理型タグの文字タグの使い方は、つぎのとおりで
す。

  1. <tag>で表されるタグで始まります。
  2. 文字を入力します。
  3. </tag>で終わります。

3.3 特殊文字

●エスケープシーケンス

 アスキー文字のうち、小なり(<)、大なり(>)、アンパーサン
ド(&)、二重引用符(")はHTMLでは特殊な意味をもちます。した
がって、特別なルールでこの文字を記述しなければなりません。こ
れらの文字はつぎのように記述します。

&lt;
<(小なり)
&gt;
>(大なり)
&amp;
&(アンパーサンド)
&quot;
"(二重引用符)

 またつぎのエスケープシーケンスもあります。

&nbsp;
(スペース)CERNでは定義されているが、ほとんどのビ
ューアで解釈できない。

 そして、アクセントのついた文字も同様に記述します。

&ouml;
小文字oにumlautがついた文字
&ntilde;
小文字nにtildeがついた文字
&Egrave;
大文字Eにgraveがついた文字

  すべての文字については、CERN Isolat1.htmlのURLを提示します。

●強制改行

 <BR>タグは行間に余分なスペースを入れずに、強制的に改行を行
います。つぎのように住所が書式づけされます。

  KDD Research and Development Laboratories<BR>
  2-1-15 Ohara, Kamifukuoka-shi,<BR>
  Saitama 356  JAPAN<BR>

●罫線(Horizontal Rule)

 <HR>タグは、ブラウザウィンドウの幅だけ罫線を引きます。

●コメント

 HTML文書にコメントを置きたい場合は、<!-- と -->で囲まれた部
分に書き込みます。コメント部分は表示されません。

  <!-- これはコメントです。 -->

4.インライン画像

 ほとんどのWWWブラウザはX-Windowビットマップ(XBM)または
CompuServe GIF形式のインライン画像を表示できます。画像を読み
込む分だけ文書の初期表示は遅くなるため、たくさんの画像や大き
な画像を文書に含めるべきではありません(商用版WWWブラウザには
JPEGをインライン表示できるものもあります)。

 インライン画像を文書に含めるためには、つぎのタグを使います。

  <IMG SRC=image_URL>
 image_URLは画像ファイルのURLです。画像ファイルがGIFの場合は、
かならずファイル名は.gifで終わらなければなりません。Xビットマ
ップ画像の場合は、.xbmで終わらなければなりません。

★画像の位置

デフォルトでは、画像の一番下の位置からつぎのテキ
ストが始まります。

ALIGN=MIDDLEオプションをつけると、画像の真中の位
置からつぎのテキストが始まります。

ALIGN=TOPオプションをつけると、画像の一番上の位置
からつぎのテキストが始まります。

 画像を横方向に好きな場所に置く場合は、<PRE>を使うとよいでし
ょう。

           
 

4.1 画像が表示できないブラウザの場合

 いくつかのWWWブラウザはVT100端末のようなキャラクタ端末で動
作するものもあります。これらのブラウザのために、ALTオプション
を使って、画像の内容をテキストで表すことができます。たとえば、
つぎのように指定します。

  <IMG SRC = "UpArrow.gif" ALT = "Up">
この場合、画像が表示される部分には「Up」と表示されます。

5.外部の画像、音声や動画像

 文書とは別の場所に画像、音声や動画像を置いて、ハイパーリン
クを行う場合は、アンカータグを使います。これは、大きな画像を
ロードする手間を省きたい場合にも使います。外部の画像を参照す
る場合、つぎのように指定します。

  <A HREF = image_URL>link anchor</A>
 参照するものは、通常外部のアプリケーションを起動して表示し
ます。たとえば、クイックタイム(QuickTime)ムービーを参照する
場合、つぎのように指定します。

  <A HREF = "QuickTimeMovie.mov">link anchor<A>
 ここでは、ファイルのタイプと拡張子を説明します。

ファイル形式
拡張子
プレーンテキスト
.txt
HTML文書
.html(.htmでも有効なブラウザもある)
GIFイメージ
.gif
TIFFイメージ
.tiff
XBMビットマップイメージ
.xbm
JPEGイメージ
.jpgまたは.jpeg
PostScript
.ps
AIFF音声
.aiff
AU音声
.au
QuickTimeムービー
.mov(UNIXでは再生できない場合がほと
んど)
MPEGムービー
.mpegまたは.mpg

6.より高度な機能・レイアウトが欲しい人へ

●GIFの透明化

 インライン画像では背景色を透明色にすることができ、より見や
すくできます。GIFの透明化については、「第4部 GIFの透明化」
参照してください。

●<FORM>タグ

 <FORM>タグはユーザーからの入力を受け取るためのタグで、入力
テキストフィールドや選択ボタンなどが使用できます。ユーザーか
らのアンケートや商品の注文書などに利用されています。フォーム
タグについては、「第2部 入力フォームの使い方」を参照してくだ
さい。

●ISMAPの使い方

 ISMAPはクリック可能なビットマップです。インラインイメージの
ある範囲をクリックすることによってハイパーリンクを実現する機
能です。詳しい説明は「第3部 ISMAP機能の設定方法」を参照してく
ださい。

 ISMAPを使うためにはイメージ(ビットマップ)の領域を座標で指
定しておかなければなりません。この作業のためのツールとしてX
Window systemではxmapeditが利用できます。

●HTML+(Mosaic-2.5 beta)

 Mosaic-2.5 beta では、HTML+の機能の一部が実装されています。
その概要については、Mosaic-2.5 beta 1についてを参照してくださ
い。

 また、Netscape Communications社のNetscapeでは独自にHTMLを拡
張しています。そして、CERNのArenaではHTML+(HTML3.0)が実装さ
れており、数式、表、図などが記述でき、かなり高いレベルでレイ
アウトが可能になっています。