HTML入門 (ドラフト)

この文章は KDD で作成されたものです。オリジナルは ここ にあります。リンクがたどれない場合は、こちらを参照して下さい。

1. HTML文書の作成

HTML文書はプレーンなテキストフォーマットで、普通Emacsやvi のような テキストエディタを使って作成されます。また、tkWWWのようなブラウジングと 組合わさったエディタやHotMetalやMacintosh上のHTML EditorのようなWISIWYG 環境を持つエディタもあります。あなたが一番使いやすいもを使用して作成して 下さい。

なお、LaTeX、SGML や RTF 等から HTML 形式に変換するツールもあります。 これを利用されるのも手です。また、HTMLの構文チェックとして weblint やhtmlchek というプログラムもあります。

作成後は、NCSA Mosaicを使って、書類をプレビューして下さい。Open Local コマンドを使用することでHTTPを使用することなく書類を見る事ができます。
また、書類を変更したら、Reloadコマンドでプレビュー画面を更新する ことができます。

2. 最小のHTML書類

一番単純なHTML文書の例を下記に示します。 
    <TITLE>シンプルなHTML書類の例</TITLE>
    <H1>これはレベル1の見出しです</H1>
    HTMLの世界にようこそ。
    これは1番目の段落です。<P>
    そしてこれは2番目の段落です。<P>
ここをクリックして、上記の例をフォーマット した結果を見て下さい。

HTMLは、テキストを表示する方法を Webブラウザに示すためにマークアップタグ (markup tags)を使用します。上記例で使用するものとして、

HTMLタグは左かぎかっこ(<)で始まり、次にタグ名が続き、 右かぎかっこ(>)で閉じる構成をとります。タグは通常、 ペアになっており、終りのタグはスラッシュ(/)で始まります。 例えば、<H1>では、終りのタグは</H1> といったようになり、このタグに囲まれた文が『見出し』となります。

ペアになっていないタグに段落タグ<P>があります。これ には、</P>は存在しません。

注意:HTMLのタグは大文字・小文字の区別はありません。 <title>は<TITLE>または <TiTlE>でも全く同等です。

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

3. 基本タグ

3.1 タイトル

全てのHTML文書はタイトルを持ちます。タイトルは一般的に、文書とは別の 場所に表示されます。書類を端的に表す言葉で表して下さい。
NCSA Mosaic では、タイトルがスクリーンの頭でプルダウンメニューの下の 辺りのDocument Titleフィールドに表示されます。

3.2 見出し

HTMLは1から6までの6つのレベルの見出しを持ち、1が一番重みが大きいものです。 見出しは本文よりも大きく太文字のフォントで表示されます。各書類の最初の見出しは <H1>でタグ化されます。見出しのシンタックスは次のように なります。

<Hy>Text of heading </Hy>

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

例えば、この文書の『見出し』節のコーディングは次のようになっています。

    <H3>3.2 見出し</H3>
それぞれの見出し例を下記に示します。

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. テニス

3.3 段落

HTMLではワープロとは異なり、TeX等のように段落や改行の印が明示的に必要 となります。段落を変更する場合、<P>タグを用います。 これは、複数のスペースが段落間にとられます。段落は次のように使用します。 改行は特に文書的な効果はないので、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>

4. 他の書類へのリンク

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

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

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

    <A HREF="DokoDoko.html">Doko</A>
このエントリは"Doko"に書類DokoDoko.htmlへの ハイパーリンクが作られ、この書類と同じディレクトリに置かれています。 別のディレクトリに置く場合は、この文書からの相対パスで指定することが できます。例えば、ファイルSokoSoko.htmlの書類が、サブ ディレクトリSokoに置かれた場合、次のように なります。

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

URL(Uniform Resource Locator)

World Wide Web は Uniform Resource Locators(URLs)と呼ばれる方法で、 他のWebサーバにあるファイルの場所を統一的に指定することができます。 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
Usenetニュースグループ
telnet
Telnetによるホストへの接続
portはサーバへの接続に使用するポート番号である。何も指定 しなければ、デフォルトの値が使用されます。

例えば、別のWebサーバ上のファイルを参照する場合、次のように指定します。

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

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

アンカーは書類の特定の場所に移動する場合にも利用されます。書類Aから書類Bの ある見出しにハイパーリンクを作る場合、まず書類Bにアンカーで名前付をしておき ます。例えば、``Sakura''という名前で参照する場合、次のように設定し ます。

    Here's <A NAME = "Sakura">some text</A>
そして、書類Aでリンクを作成する。リンクする書類名とハッシュマーク (#)で続け、書類Aのアンカーで名前付した名前を指定します。

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

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

同じ文書内で、ある場所に移動する場合は、書類名は必要なく、ハッシュマーク (#)以下のように使用します。

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

5. リスト

HTMLは、unnumbered、番号付、定義型リストをサポートしています。

Unnumberedリスト

unnumberedリストを作成するには、次のようにします。

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

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

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

番号付リスト

番号付リストの場合、unnumberedリストで使われたタグ<UL> のかわりに<OL>を用います。アイテムを表すタグ <LI>はそのまま使用します。

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

  1. 蜜柑
  2. 桃
  3. 葡萄

定義型リスト

定義型リストは、用語(DT)と定義(DD)から構成 される。次が定義型リストの例です。 
    <DL>
    <DT> ブラームス
    <DD> 1833〜97。19世紀ドイツ音楽の最大の作曲家の一人である。バッハ、
       ベートーヴェンとともにドイツ音楽の３Ｂと呼ばれる。若い頃は
       ピアニストとして活躍し各地を演奏旅行した。作品は、初期はピアノ曲・
       歌曲・室内楽を中心に作曲、後期は交響曲・協奏曲等の大作を作曲する。
       ロマン派絶頂の中、新古典派と呼ばれた。代表曲に、交響曲第1〜4番、
       ヴァイオリン協奏曲等多数。
    <DT> マーラー
    <DD> 1860〜1911。後期ロマン派の交響曲作曲家、指揮者。作品は長大な
       交響曲と、それと不可分な関係にある管弦楽伴奏付き歌曲が中心。
       代表曲に、交響曲第1番「巨人」、5番等多数。
    </DL>
表示は次のようになります。

ブラームス
1833〜97。19世紀ドイツ音楽の最大の作曲家の一人である。バッハ、 ベートーヴェンとともにドイツ音楽の３Ｂと呼ばれる。若い頃は ピアニストとして活躍し各地を演奏旅行した。作品は、初期はピアノ曲・ 歌曲・室内楽を中心に作曲、後期は交響曲・協奏曲等の大作を作曲する。 ロマン派絶頂の中、新古典派と呼ばれた。代表曲に、交響曲第1〜4番、 ヴァイオリン協奏曲等多数。
マーラー
1860〜1911。後期ロマン派の交響曲作曲家、指揮者。作品は長大な 交響曲と、それと不可分な関係にある管弦楽伴奏付き歌曲が中心。 代表曲に、交響曲第1番「巨人」、5番等多数。
<DT>と<DD>は複数段落を含めること ができます。段落を分ける場合は、<P>を使用します。

リストの入れ子

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

次に入れ子リスト例を示します。 

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

6. Preformatted Text

固定幅フォントでスペース、改行、タグを有効にしたテキストを生成する ために<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では <, >や &などは特殊記号として扱われるため、これらの文字は、エスケープ シーケンス記号を使って表されなければなりません。

引用文

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

例えば、

    <BLOCKQUOTE>
    私は自転車でサイクリングをするのが趣味です。サイクリングはとても
    健康によいスポーツです。<P>
    私の家のそばに公共のサイクリングロードがあります。毎週土曜日に
    そのサイクリングロードを走っています。サイクリングロードは全長
    ５０Ｋｍにも及ぶもので、とても気持良く走ることができます。<P>
    </BLOCKQUOTE>
とした場合、その結果は次のようになります。

私は自転車でサイクリングをするのが趣味です。サイクリングはとても 健康によいスポーツです。

私の家のそばに公共のサイクリングロードがあります。毎週土曜日に そのサイクリングロードを走っています。サイクリングロードは全長 ５０Ｋｍにも及ぶもので、とても気持良く走ることができます。

アドレス

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

例えば、次のような行の場合、

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

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

注意:<ADDRESS>は郵便アドレスの意味では ありません。

7. 文字のフォーマット

個々の単語には特別なスタイルを持たせることができます。このスタイルには、 論理型と物理型な二つのタイプがあります。論理型スタイルタグはその単語の 意味付けしたもので、物理型スタイルでは、フォントの指定になります。 文字をフォーマットする際には、できるだけ論理型のスタイルタグを用いた 方がいいでしょう。

論理型スタイル

<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 filenameはファイルを削除します)

物理型スタイル

<B>
ボールド体テキスト(太文字)
<I>
イタリックテキスト(斜体)
<TT>
タイプライタテキスト(等幅フォント)

文字タグの使い方

論理型/物理型文字タグの使用方法は、次のとおりです。
  1. <tag> で表されるタグ で始まります。
  2. 文字を入力します。
  3. </tag>で終ります。

特殊文字

エスケープシーケンス

ASCII文字のうち4つ文字 -- 左括弧(<)、右括弧 (>)、アンパーサンド(&)、 二重引用符(") -- はHTMLでは特殊な意味を持ちます。 従って、特別なルールでこの文字を記述しなければなりません。これらの 文字は次のように記述します。
&lt;
左括弧：<
&gt;
右括弧：>
&amp;
アンパーサンド：&
&quot;
二重引用符："
そして、アクセントの付いた文字も同様に記述します。
&ouml;
小文字oにumlautが付いた文字：ö
&ntilde;
小文字nにtildeが付いた文字：ñ
&Egrave;
大文字Eにgraveが付いた文字：È
全ての文字 については、CERN にあります。

強制改行

<BR>タグは行間に余分なスペースを入れずに、改行を 強制的に行います。次のように郵便アドレスがフォーマットされます。 
    KDD Research and Development Laboratories<BR>
    2-1-15 Ohara, Kamifukuoka-shi,<BR>
    Saitama 356  JAPAN<BR>

水平線

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

コメント

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

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

8. インライン画像

ほとんどのWebブラウザはXビットマップ(XBM)またはGIFフォーマットの インライン画像を表示することができます。画像を読み込む分だけ、書類の 初期表示は遅くなるため、たくさんの画像や大きな画像を書類に含める べきではありません。(コマーシャル版WebブラウザにはJPEGをインライン 表示できるものもあります)

インライン画像を書類に含めるためには、次のタグを使用します。

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

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

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

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

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

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

いくつかのWWWブラウザはVT100端末のように画像を表示できないものがあります。 この場合、ALTオプションを用いて、画像の内容をテキストで 表すことができます。例えば、次のように指定します。

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

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

文書とは別の場所に画像、音声や動画像を置き、ハイパーリンクを行う場合、 アンカータグを用います。これは、大きな画像をロードする手間を省きたい 場合にも用いられます。

外部の画像を参照する場合、次のように指定します。

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

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

File Type
Extension
プレーンテキスト
.txt
HTML文書
.html
GIF画像
.gif
TIFF画像
.tiff
XBMビットマップ画像
.xbm
JPEG画像
.jpgまたは.jpeg
ポストスクリプトファイル
.ps
AIFF音声
.aiff
AU音声
.au
QuickTimeムービー (Xウィンドウ上での再生は xanim が利用できます)
.mov
MPEGムービー
.mpegまたは.mpg

10. もっと多くの情報が欲しい人へ

10.1 GIFの透明化

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

10.2 Fill-out Forms

fill-out フォームは入力フィールドや選択ボタンなどを記述する形式で、 <FORM>タグを用いて記述します。ユーザへの質問を 行うフォームや注文書などを作成するのに便利です。

fill-out フォームについては、FORMタグ記述方法 のメモを参照して下さい。

10.3 ISMAPの使い方

ISMAP機能はクリック可能なマップ(図面)を作成し、画像のある範囲をクリック することによってURLにハイパーリンクすることができる機能です。 詳しい説明はNTTにある ISMAP機能の設定方法を参照して下さい。

例として、成田空港の図があります。
マップの座標設定を簡単に行うプログラム xmapeditがあります。

10.4 HTML+(Mosaic-2.5 beta)

Mosaic-2.5 beta では、HTML+の機能の一部を採り入れています。その概要に ついては、Mosaic 2.5 betaについてを 参照して下さい。

また、Mosaic Comm. 社の Netscape では独自に HTML を拡張しています。 そして、CERN の Arena では HTML+ (HTML 3.0) が実装されており、数式、 表、図などが記述できます。

簡単ではありますが終ります。

この文書は、NCSA のhttp://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.htmlを
元に作成しました。

内容に間違いがございましたら、下記のメールアドレスまで御連絡下さい。
技術メモに戻る.

HTML入門 / KDD 堀田孝男 / hotta@lab.kdd.co.jp / 95年1月20日