HTML 文書作成入門

HTML 文書作成入門

1  はじめに

総合情報処理センタ一 馬 場 邦 宏 : 花 田 英 輔 ， 野 崎 剛 一

最近では，一般の新聞や雑誌にまで「マルチメディア j という言葉が登場するようにな りました.言葉だけが先行しているとよく言われますが，簡単に言うとマルチメディアと は「画像，音声，文字のデータを表現する手段あるいは技術であり，それによって生まれ た情報」と言えると思います.

そこで，身近なマルチメディアの代表例であるオンラインデータベース W W W につい て，その情報作成方法を取り上げます.

WWW(World Wide Web)は，様々な情報を結び付ける手段としてのハイパーテキスト を用いて，インターネット上の情報に広域にアクセスできるシステムとして， 1 9 8 9 年に

CERN  (ヨーロッパ素粒子物理研究所)により提案されました.

ここでは， W W W サーバで提示するデータを記述する際に使われる，マークアップ言語 である HTML(HyperText Markup Language)によるドキュメント作成を通して，マルチ メディアのさわりの部分にふれたいと思います.

2  HTML 文書の作成 2 . 1   作成手段と確認

HTML 文書を作るには，一般的なテキストエディタで十分可能です.

HTML は τ 協や多くのプログラム言語と違い，コンパイル等のコード変換の必要がな く，作成したドキュメントがそのまま実行ファイルとなります.

ファイル作成後は， Mosaic 等のビューア I を起動し， F i l eメニュー内の OpenL o c a lコマ ンドを使うことで画面表示できますので 作成直後に内容を確かめることができます.

また，ビューアには R e l o a dという機能がありますので，ウインドウシステムでは作成し た文書を表示させながら，別のウインドウ上でテキストエディタで変更し，保存した後に Rβloadを行うことで確認しながらの変更も可能です.

'受託研究員(協和機電工業(株)) 

lWWW サーバのデータを参照するためのツール.

2 . 2   サンプル文書の作成

以下にサンプルテキストを示します.興味ある方は，独自の HTML ドキュメントを作成 し ， M o s a i c 等を利用して表示してみて下さい.

サンプルテキスト

<TITLE> M y  P a g e   </TITLE> 

<Hl> 自己紹介ページ </Hl>

<P> 

居室建物の概観

<IMG A L I G N = T O P  SRC="bldg.gif" > 

<P> 

<A HREF=="myimage.gif"  >私のイメージ画像 </A>

このサンプルテキストは 例えばセンターのワークステーションでは次の手順で作成で きます.なお， M o s a i c は X ウインドウで利用するものを参考にしています.

サンプルテキス卜作成/表示手順

1.イメージスキャナ一等を使って，画像データファイルを 2 つ作ります. 1 つはファイ ル名を" b l d g . g i f "   (建物の写真等)，もう l つ は " m y i m a g e . g i f "   (免許証の自分の顔写 真等)として下さい.画像の取り込み手順は別の説明山を参照下さい.

2 . サンプルテキストをまるごとコピーしたファイル" t e s t . h t m l   "を作ります.以上のファ イルは同一ディレクトリに置いて下さい

3 .   Mosaic を起動し，ウインドウ上部の F i l e メニューの中の OpenL o c a l コマンドを使つ て，サプウインドウを聞きます.

4 .   D i r e c t o r i e s と表示されている枠内で，今作ったファイルの置かれであるディレクトリ 名のところをクリックし，続いてウインドウ下部の F i l t e r をクリックします.すると F i l e s と表示している枠内に，今作った" t e s t  . h t m l   "というファイルが現れますから，

そこをクリックします.

5 .   Name o f  l o c a l  document t o  o p e n : という枠内の最後に t e s t . h t m l と表示しであるのを 確認の上， OK の所をクリックすると目的のウインドウが聞きます.字が化ける時は Option メニューの F o n t s より J a p a n e s e を選択します.

6 . ウインドウ内に" b l d g . g i f " の 画 像 が 表 示 で き た ら 私 の イ メ } ジ 画 像 " と 書 か れ て いるところをクリックします.

7 . しばらくすると，ウインドウの枠が現れますから，マウスを適当な位置まで移動して，

クリックします. "myimage.gif" の画像が表示されれば OK です.

8 . 後はテキストファイル上に自分のコメントを追加じたり，画像ファイル名を変更した りしてみて下さい.

(注)このサンプルは，あくまでも作成者の確認のためだけのものです.学外に対して情報発信

(情報公開)したい場合はそれなりの環境が必要となります.

3  HTML 文法入門

3 . 1   運用中の文書例

HTML は文書の中にタグと呼ばれるマークをつけることで様々な機能を発揮します.

まず，長崎大学総合情報処理センターで実験的に運用されているサーバー [ 2 ] 上にある，

センター紹介用の HTML 文書を例に上げ，その幾つかのタグについて簡単に説明します.

この例は，センターのマシンで M o s a i c を起動した時の長崎大学ホームページ(日本語版) 上の"こちら長崎大学総合情報処理センターですの部分をマウスクリックすると表示さ れる画面の HTML 文書のテキストデータとその画面です.

<title> Nagasaki Univ.  Information Science Center  (inJapaneseEUC) 

</title> 

<Hl> 長崎大学総合情報処理センター </Hl>

<p> 

This i s   Nagasaki Univ.  Information S と ienceCenter. 

In this WWW 

we are using SJIS  (X0208)  for Japanese. 

工 fyou cannot read Jap

ese

please chage fonts a t  your Mosaic. 

<p> 

<a href==" http://SC /I SC‑big.gif'' ><img src=" ISC.gif" ></a> 

<p> 

長崎大学<ahref==''http://SC//SC‑big.gif'' >総合情報処理センタ一概観</a>

<p> 

============== 

く p>

当センターは，長崎大学におけるくul>

<li> コンビュータサービスの中心的な役割

<li> ネットワークに関する中，心的役:割

</ul> 

を果たしています.

く p>

============= 

<p> 

センター関連資料

<p>長崎大学総合情報処理センター <ahref=''http://SC/System.eps'' > 

システム概念図 </a>

<p> 

センターがオ 9 なっているサーピス

く p>

* * *   Gopherサーバ林事

<p> <a href=" gopher: /  /gopher. c c  .nagasaki‑u. ac .jp/11/pub "  > gopher</a> 

<p> キ** FTP サーノ'i * * *  

<p> FTP 可能な <ahref="file://ftp.cc.nagasaki‑u.ac.jp/pub/prg" 

>プログラム </a>

<p> FTP 可能なく ahref="file://ftp.cc.nagasaki‑u.ac.jp/pub/doc" 

>ドキュメント </a>

<p>  * * *   WWWサーバ*本ホ

<p> 先週の <ahref=''http://SC/lastweek.html''  >利用状況</a>

く

p>

<p> <a  href=" http://www.cc.nagasaki‑u.ac.jp /i ndex‑J.html''  > 

メインページく/a> に戻る

く

p>

En glish messages are

ahref=''http://SC/center.html''  >HERE

/a>

く

p>

く

address> Me 

図 1 総合情報処理センターのホームページ

3 . 2   サンプルテキス卜上のタグ

タグはくの後にタグ名が続き>で終る形をとります.一般にタグは，ペアになっていて，

<tag> で始まり，タグ名の前にスラッシュのついたく /tag> で終ります.

但し，改行タグ <P> 等のように， </P> のいらない単独のタグもあります.

タグには大文字・小文字の区別はありません. <TITLE> とく t i t l e > は同じです.

3 . 2 . 1   タイト j レ

< t i t l e >  N a g a s a k i  Un

I n f o r m a t i o nS c i e n c e  C e n t e r  ( i n J a p a n e s e E U C) < / t i t l e > 部分です.

HTML 文書には必ずタイトルが必要です.タイトルはテキストとは別の場所に表示され ます.表題としてわかりやすいタイトルを付けて下さい.

Xウインドウ用の NCSAM o s a i c では タイトルがプルダウンメニューの下の Doeument T i t l eフィールドに表示されます.

3 . 2 . 2   本文中の見出し

<Hl> 長崎大学総合情報処理センター </Hl> といった部分です.

HTML では本文中の見出しとして，大きく目立つフォントで表示したい時などに専用タ グを用います.

書式は <H?> … </H?>という形をとり?はフォントの大きさの順位を表す l から 6 までの数字が入り， 1 が一番大きい文字で表示されます.

尚，このタグはフォントの大きさを変更する時にも用いられます.

3 . 2 . 3   改行と段落

<p> のところです.

HTML では多くのワープロのドキュメントと異なり，改行や段落を無視し，複数の空白 は l つの空白に修正されます. (<TITLE> タグ内は除く).そこで，文章中の強制改行 2 に は専用タグ<BR> を，段落を設けたい時はくP> タグを使います.

3 . 3   他の書類へのリンク

HTML のすぐれたところは，他の書類への(ハイパーテキスト)リンクや文書中でのジャ ンプが簡単に行なえることです.

これにより，文章中での参考文献の閲覧や補足説明の参照等に非常に便利です.

ハイパーリンクにはアンカーと呼ばれるくA> タグを使います.アンカーは次のように用 います.

1 .   <A で始めます. (A の後には必ず l つ以上の空白が必要です)

2 . パラメータ HREF= " 自 l e n a m e "によってハイパーリンク先の書類名を指定し，>で 閉じます.

3 . ハイパーリンク先を表すテキスト(マウスクリックする場所)を入力します.

4 . 最後に </A> で終了します.

ハイパーテキストリンクを行う部分 ( 3 . のテキスト部分)は通常，色が付いたり下線が引 かれています.

2 行間に余分なスペースを入れずに改行する.

3 . 3 . 1   他の書類への通常のリンク サンプルテキスト中の，

<p> 先週のく ah r e f =  .   h . t 七 p : j I S C j l a s t w e e k . h t m l " >利用状況 <ja>

では

"利用状況"(アンダーライン付きの青色表示 3 ) に，書類" l a s t w 明 k . h t m l " へのハイパー リンクが作られ，この書類と同じディレクトリに置かれています.

ここをクリックすると，利用状況のテキストが現れます.

別の場所に置く場合は，相対パス名，絶対パス名で指定できますが， W W W サーバによっ て指定方法が異なります.

World Wide Web  は UniformR e s o u r c e  L o c a t o r s ( U R L s ) と呼ばれる方法で，世界中の他 の W W W サーバにあるファイルの場所を統一的に指定することができます. URL は資源 のタイプも含んでおり， W W W 以外の資源 ( g o p h 町川 T A I S ， FTP 等)へのアクセスも可能と

しています. URL の書式は次のとおりです.

アクセス法://ホスト名.ドメイン名[:ポート番号 4 J / パス名/ファイル名 ( s c h e m e : /  / h o s t . d o m a i n [ : p o r t J j p a t h j f i l e n a m e )  

ナ ク セ ス 法 ( s c h e m e ) の主なものは以下の通りです.

1 項目￨アクセス方法(叫 eme) I アクセ X の対象

1  f i l e   ローカルシステム上か AnonymousFTP  で入手できるファイル

2  f t p   Anonymous FTP 上のファイル 3  h t t p   World Wide Web サーバ上のファイル 4  g o p h e r   GopherWorld サーバ上のファイル 5  w a l s   WAIS サーバ上のファイル

6  news  U s e n e t ニュース(電子ニュース)グループ

7  t e l n e t   T e l n e t によるホストへの接続

例えば，別の W W W サーバ上のファイルを参照する場合，次のようになります.

<A HREF=''http://www.ncsa.edu/Primer.html''>Beginner's Guide t o   HTML</A> 

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

アンカーは書類の特定の場所に移動する場合にも利用されます.書類 A から書類 B 中の ある場所にハイパーリンクを作る場合，まず書類 B の目的の場所にアンカーで名前付けを

しておきます.

例えば，書類 B のある場所を" s h i a n b a s h i   "という名前で参照する場合，次のように設 定します.

名所，旧跡 <ANAME = "shianbashi"  >案内 </A>

そして，書類 A でリンクを作成します.リンクする書類名とシャープ記号(#)の後に続 けて，書類 B のアンカーで名前付けした名前を指定します.

最近の <AHREF = "meisho.html#shianbashi  ">思案橋</A> 周辺

3 参照すると赤色に変化した後に紫色表示で破線のアンダーラインになる.

4 ポート番号に何も指定しなければ，デフォルトの値が使用されます.

となります.実際には，書類 A の画面上で，

最近の思案橋周辺

と表示されている部分の'思案橋'の所をマウスクリックすると， " m e i s h o . h t m l " という ファイルの" s h i a n  b a s h i   "というアンカー名の部分，すなわち"名所，旧跡案内"という文 字を画面の最上行 5 として，これに続くファイル内容を表示します.

3 . 3 . 3   表示している書類内の指定した場所(見出し)へのリンク

現在表示している書類内で他の場所に移動するリンクを作成する場合は，書類名は必要 なく，以下のようになります.

最近の <AH R E F ・= " # s h i a n b a s h i "   >思案橋 </A> 周辺 3 . 3 . 4   コメント

HTMLの文書中にコメントを書く場合は， <!ーとー>の聞に書き込みます.

たとえば， <!ーここはコメントにつき表示されません. 一>

3 . 4   インライン画像

www では，文字情報の途中に， XBM 形式 ( X ピットマップ)または GIF 形式， . J PEG  形式の画像を表示することができます.

ただ，画像処理には時聞がかかるため，特にホームベ}ジにはあまり多くの画像や大き な画像を含めるのはひかえましょう.

文章中に画像(例えば剖 e n a m e . g i f という画像ファイルの場合)を表示するには，

<IMG SRC="filename.gif" > 

という書式で記述します.

画像ファイルが GIF 形式の場合は，必ずファイル名は . g i f で ， XBM 形式の場合 ' i ， . x b m   で終らなければなりません.

画像の表示位置は，このタグの直前に改行タグ (<P> 等)があれば，ウインドの左端を基 準に表示され，改行タグを伴わないテキストがあれば，このテキストの最終文字の次を左 端として表示されます.

そして，特に指定がない場合は，テキストの表示行と画像の底辺とが合うように表示さ れます.

以下のように， A L I G N = T O P オプションを付けると，テキストの表示行と画像の一番上が 合うように表示されます.

<IMG  ALIGN=TO~ S R C = "  f i l e n a m e . g i f "  > 

A L I G N = M I D D L E オプションを付けると，画像の真中の位置からのテキストが始まります.

また，このタグの直後に改行タグがなく，テキストが続いていれば，画像データの右側 に同じ様に表示されます.但し，テキストの長さと画像の幅を足した大きさが，ウインド ウの幅を越えると，改行を伴って 6 画像が表示されます.

これは実際にウインドウの幅を変えてみるとよくわかります.ウインドウの幅は X ウイ ンドウ用 M o s a i c の場合は右上隅の正方形をマウスでクリックしたままマウスを動かすと変 化します.

5 アンカー位置がファイ j レの最後の方の場合はこの限りではない.

6 ブラウザにより異なります.

もし，帽の広い画像を表示する場合は，画像パラメータを記述する前に <P> で改行して おき，表示した後も改行するようにして下さい.

画像を横方向に好きな場所に置くには 書き出しを揃えるタグである <PRE> タグの後の

<IMG タグの書き出し位置で調整します.

3 . 5   その他の解説

HTML についての詳しい説明等は センターのサーバを指定した M o s a i c 起動時のホーム ページで "HTML に関する日本語による解説 . . ( h t t p : / / w w w . n t t . j p / S Q U A R E / h o w t o . h t m l ) を選択し，リンクしである以下のような資料を参考にして下さい.

本文も以下の文献を参考にしています.

.HTML を用いた， x m o s a i c 上での H y p e r T e x t を書く為のマニュアル(超簡略版) ( h t t p : / / w w f s . a i s t ‑ n a r a . a c . j p : 8 0 0 1 / s h i k a / n a i s t / f a q / h t m l ‑ m a n . h t m l )   .HTML 入門

( h t t p : / / r i n g o . s f c . k e i o . a c . j p / o t h e r d o c u m e n t s / h t m l . h t m l )  

‑初心者向き HTML ガイド

( h t t p : / / w w w . n t t . j p / d o c s / h t m l ‑ j m a n / n c s a ‑ j . h t m l )   参考文献

[ l J 野崎，馬場，花田: I インターネットによる情報発信 J

長崎大学総合情報処理センター「センターレポート J 第 1 4 号

[ 2 J 花田 :IWWW サーバの運用と問題点」

長崎大学総合情報処理センター「センターレポート J ^第 1 4 号