第1部 HTML入門

1.HTML文書の作成

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

1.1 最小のHTML文書

　　<TITLE>シンプルなHTML文書の例</TITLE>

　　<H1>これはレベル1の見出しです</H1>

　　HTMLの世界にようこそ。

　　これは1番目の段落です。<P>

　　そしてこれは2番目の段落です。<P>

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

• <TITLE>タグ（と対応する</TITLE>タグ）文書のタイトル
  を表す
• <H1>見出しタグ（と対応する</H1>）
• <P>段落分けタグ

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

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

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

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

1.2 基本タグ

●タイトル

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

●見出し

　　<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の世界にようこそ。

　これは1番目の段落です。<P>

　<TITLE>シンプルなHTML文書の例</TITLE><H1>これは

　レベル1の見出しです</H1>HTMLの世界にようこそ。これは1番目の段落

　です。<P>そしてこれは2番目の段落です。<P>

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

　　<P>

　　これはHTML+での段落です。

　　</P>

　　<P ALIGN=CENTER>

　　これは中央寄せの段落です。これはHTML+の記述方法で、まだ利用できません。

　　</P>

 

1.3 他の文書へのリンク

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

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

　たとえば、

　　<A HREF="MaineStates.html">Maine</A>

　　<A HREF="AtlanticStates/NJStates.html">NJStates</A>

●URL（Uniform Resource Locator）

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>

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

　　This is document B.Here's <A NAME = "Jabberwocky">some text</A>

　　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 リスト

●番号なしリスト

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

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

　　<UL>

　　<LI> りんご

　　<LI> バナナ

　　</UL>

• りんご
• バナナ

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

●番号つきリスト

　　<OL>

　　<LI>蜜柑

　　<LI>桃

　　<LI>葡萄

　　</OL>

1. 蜜柑
2. 桃
3. 葡萄

●定義型リスト

　　<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>を使います。

●リストの入れ子

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

　　<UL>

　　<LI> 東京都

　　　　<UL>

　　　　<LI> 千代田区

　　　　<LI> 港区

　　　　</UL>

　　<LI> 横浜市

　　　　<UL>

　　　　<LI> 緑区

　　　　</UL>

　　</UL>

• 東京都
  • 千代田区
  • 港区
• 横浜市
  • 緑区

2.2 整形ずみテキスト

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

2.3 引用文

　たとえば、

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

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

　　</ADDRESS>

3.文字の修飾

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

●論理型タグ

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

タイプライタ（固定幅フォント）

<U>

アンダーライン

3.2 文字タグの使い方

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

3.3 特殊文字

●エスケープシーケンス

&lt;

<（小なり）

&gt;

>（大なり）

&amp;

&（アンパーサンド）

&quot;

"（二重引用符）

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

&nbsp;

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

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

&ouml;

小文字oにumlautがついた文字

&ntilde;

小文字nにtildeがついた文字

&Egrave;

大文字Eにgraveがついた文字

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

●強制改行

　　KDD Research and Development Laboratories<BR>

　　2-1-15 Ohara, Kamifukuoka-shi,<BR>

　　Saitama 356  JAPAN<BR>

●罫線（Horizontal Rule）

●コメント

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

4.インライン画像

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

　　<IMG SRC=image_URL>

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

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

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

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

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

　　<IMG SRC = "UpArrow.gif" ALT = "Up">

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

　　<A HREF = image_URL>link anchor</A>

　　<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の透明化

●<FORM>タグ

●ISMAPの使い方

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

●HTML+（Mosaic-2.5 beta）

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