5.6 HTMLによるWWWページの作り方

情報処理実習用手引き(システム解説編)
第5章 インターネットの利用
5.6 HTMLによるWWWページの作り方
                                       電子・情報工学系
                                       新城 靖
                                       <yas@is.tsukuba.ac.jp>

このページは、次の URL にあります。
http://www.hlla.is.tsukuba.ac.jp/~yas/ipe/tebiki-1997/5-inet/6-html.html
http://www.ipe.tsukuba.ac.jp/~yshinjo/tebiki-1997/5-inet/6-html.html
あるいは、次のページから手繰っていくこともできます。
http://www.ipe.tsukuba.ac.jp/~yshinjo/
http://www.hlla.is.tsukuba.ac.jp/~yas/ipe/
http://www.hlla.is.tsukuba.ac.jp/~yas/index-j.html
http://www.ipe.tsukuba.ac.jp/

■WWWとHTML

この節では、インターネット上の情報提供・探索システムの1つであるWWW (the World-Wide Web)を用いて、情報発信を行う方法について説明する。 WWW では、ハイパーメディアに基づきテキスト情報の他にイメージ情報や音声 情報を扱うことができる。WWWでは、HTML(HyperText Markup Language) によ りハイパーメディア情報が記述される。HTML では、URL (Uniform Resource Locator) によりリンクが表現される。

この節では、自分のWWWのホーム・ページを作成する方法について説明する。 ホーム・ページの作成を通じて、WWW で使われているマークアップ言語 HTML の構文と意味、ハイパーリンクの作成方法、イメージ・データの扱いについて 学ぶ。

◆ハイパーメディア

ハイパーメディアとは、マルチメディアが発展し、 他の情報への参照を含むようになったものである。ここでマルチメディアとは、 従来の文字や数値といったデータに加えて、静止画像、動画像、音声といった データを統合的に扱うことを意味するものとする。マルチメディアの段階では、 文字の他に音声や画像といったデータが並んでいるだけである。ハイパーメディ ア・データは、そのようなデータの他に、他のデータへの参照) (ポインタ、リンク)を含んでいる。ハイパーメディアの特徴の特徴は、参照 を手繰って、他の情報に簡単に移動することができることである。データとし てテキストしか含まれていない場合は、ハイパーテキスト (Hypertext)と呼ばれる。

◆WWWを定義する3つの規約(HTML, URL, HTTP)

WWW は、次のような規約の定義から成り立っている。

  1. HTML (HyperText Markup Language): これは、ハイパー メディア情報を記述するための言語である。
  2. URL (Uniform Resource Locator): これは、ハイパーメ ディア情報をアドレス付けする文字列である。URL は、HTML におけるハイパー リンクの表現に使われる。
  3. HTTP (HyperText Transfer Protocol): これは、WWW サー バと WWW クライアントの間の通信形式を定めた規約(約束、プロトコル)で ある。
WWWサーバとは、ページのデータを保持していて、WWWクライアントからの要求 に応じて、データを提供するプログラムである。WWWクライアントは、サーバ から取ってきたデータを画面に表示するプログラム(WWWブラウザ)である。

◆HTML

日本語や英語など、人間が会話や文書に使っている言語を自然言 語という。これに体して、数学やその他の科学、および、コンピュータを扱 うために考え出された言語を人工言語という。コンピュータ用の (人工言語)で、プログラムを書くために作られた言語は、プログ ラミング言語と呼ばれている。コンピュータ用の人工言語には、プログラミ ング言語の他に、マークアップ言語がある。

文書(テキスト)に、「ここは表題」、「ここは箇条書」といった、文書の構 造を示す目印(マーク)を付けることを「マークアップmarkup)」と呼ぶ。マークアップのための目印を文書に埋め込 むための人工言語をマークアップ言語という。マークアップ言語には、SGML (StarndardGeneralized Markup Language) がある。WWW で使われている HTML (HyperText Markup Language) は、SGMLを基にしたマークアップ言語である。

HTML は、文書の構造を記述するものである。HTML で記述できる 文書の構造の例を、以下に示する。

HTML では、文書の構造を記述することができるが、表示の方法を記述するこ とは、本来はできない。表示の方法には、次のようなものがある。 ワープロは、紙に印刷した時の、このような表示の方法を設定す るためのプログラムである。これに対して、HTML では、表示の方法は、それ を表示するプログラム(ブラウザ)によって決められる。例外として、以下で 述べる物理スタイルタグがある。ブラウザによっては、物理スタイルタグが無 視される。

◆URL

URL は、次のような形式をしている。

http://host(:port)/dir/filename

http: とは、HTTP を意味する。http: の他に、 ftp: という形式が使われることもある。host(:port) は、 WWWサーバがどこにあるかを示す情報である。/dir/filename は、そ のサーバにより使われる文字列である。普通、あるディレクトリを基準にした、 ディレクトリ名とファイル名である。

URL には、完全形と短縮形がある。完全形とは、上で示したよう にhttp:,host,dir/filename がそろっているものである。 短縮形とは、このうち http:host が省 略されたものである。たとえば、ある HTML で記述されたデータの URL が http://host1/port1/dir1/file1.html であったとする。このデータ の中に、file2.html という短縮形の URL が含まれていたとする。 これは、完全形では、http://host1/port1/dir1/file2.html を意味 する。なお、完全形と短縮形は、それぞれ絶対形 (相対形)とも呼ばれる。

◆ホーム・ページ

WWWにおけるホーム・ページとは、本来は、ある一連の情報にアクセスするた めに、最初にアクセスされることが想定されて作られているページである。よっ て、本来は、ホーム・ページではないWWWページも存在する。この手引きの 5章では、ホーム・ページとWWWページという言葉を慎重に使い分けている。

ホーム・ページには、次のような種類がある。

この節では、個人のホーム・ページを作成する方法について説明する。

■HTMLの文法

HTML による文書は、「<>」で括られたキーワード( (タグ))が埋め込まれたテキスト・ファイルである。テキスト・ファイルとは、 文字データだけが並んでいるファイルで、テキスト・エディタ(mule)で修正 できるものである。HTMLのタグは、次のような形式になっている。

<タグ名>タグの対象テキスト</タグ名>

このように、タグには開始タグ(/がついていない) と (終了タグ)(/がついている)がある。開始タグと 終了タグの間にタグ付けの対象となるテキストが書かれる。基本的に開始タグ は、見出し、箇条書などの機能を「オン」にし、終了タグは機能を「オフ」に する働きがある。ただし、<IMG> のように組になっていないタグ もある。タグ名には、アルファベット(大文字を使っても小文字を使ってもか まわない)と数字が使われる。ただし、アルファベット、数字、記号としては、 漢字の半分の大きさで表示されるもの(例:<>123ABC, かな漢字 変換機能を働かさないようにしてキーボードから打ちこんだもの)を使う。ア ルファベットや数字にも、漢字と同じ大きさで表示されるもの(例:<>12 3ABC)は、漢字として認識され、タグとして認識されない。

タグとし使われる英数字は、文字端末(Telnet や kterm の中)では、漢字の半 分の幅で表示される。よって、それらのことは、しばしば「半角文字」とよば れる。そして漢字と同じ幅で表示されるものは、「全角文字」と呼ばれる。し かしながら、本質は表示される文字の幅ではなく、その文字がどのような符号 (文字コード)で表現されているかにある。タグは、ASCII 文字コード(アス キー)により表現される。

タグには、次のようにオプションを設定できるものがある。

<タグ名 属性名=属性値1 属性名2=値2>タグの対象テキスト</タグ名>

このように、オプションは、開始タグの括弧「<>」の 中に、「属性名=値」の形式で記述される。

◆HTML文書の構造

HTMLの文書は、大まかには次のような構造をしている。


--------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE>
タイトル
</TITLE>
</HEAD>

<BODY>
本体
</BODY>
</HTML>
--------------------------------------------------------------------

このように、HTMLの文書は、<HEAD>,</HEAD> で囲 まれたヘッダと、<BODY>,</BODY> で囲まれた本体 から構成される。ヘッダの<TITLE>,</TITLE>で囲ま れた部分は、題名であり、タイトルバーなどに表示される。

HTML記述:

<HEAD>
<TITLE>
University of Tsukuba</TITLE>
</HEAD>

表示例:

タイトルバーに現れた題目

ヘッダでは、以下で説明する見出し、文字飾り、ハイパーリンクを使うことが できない。

◆見出し(heading)

HTMLで記述された文書の本体の部分は、次のような構造になっている。

--------------------------------------------------------------------
<H1>見出し1</H1>
        パラグラフの並び1
        <H2>見出し2</H2>
        パラグラフの並び2
                <H3>見出し3</H3>
                パラグラフの並び3
                <H3>見出し4</H3>
                パラグラフの並び4
        <H2>見出し5</H2>
        パラグラフの並び5
                <H3>見出し6</H3>
                パラグラフの並び6
        <H2>見出し7</H2>
        パラグラフの並び7
                <H3>見出し8</H3>
                パラグラフの並び8
--------------------------------------------------------------------

このように、HTML の文書は、見出しとパラグラフの並びから構成される。 HTML では、見出しとして <H1> から <H6> までが定 義されている。見出しを使うことで、章の構成を表現することができる。ここ で段付け(字下げ, indentation)は、説明のために付けたものである。HTML では、空白やタブは、単語の区切りとして扱われるため、空白やタブによる段 付けは無視される。(文書の記述者が、自分自身の読みやすさのために、自由 に空白やタブによる段付けを行ってもよい。)

<H1> から <H3> までの見出しは、Netscape, Mosaic などのブラウザでは、標準で普通の文字より大きな文字で表示される。

表示例:

見出しの表示例

しかしながら、大きな文字で表示させたるために、見出しの機能を使うのは、 本来は、誤りである。見出しがどのように表示されるかは、ブラウザに依存し ている。文字の大きさも、ブラウザで自由に変えられるようになっている。見 出しは、あくまでも章の構成を表わす目的で使うべきである。

◆パラグラフ

見出しと見出しの間には、いくつかのパラグラフを記述する。パラグラフは、 <P>で始まり、</P>で終る。終 りの</P>は、オプション(付けても付けなくてもよい) であり、しばしば省略される。

以前の規格では、<P>は、パラグラフの終りを意味して いた。よって、多くのWWWブラウザが今でも<P>の部 分で1行程度の空行を表示する。今のブラウザの多くでは、 <P> を、パラグラフの先頭としてではなく、パラグラ フの区切りを表わすものとして使った方が、見栄えがよくなることがある。し かし、行間を空けるために <P> を使うのは本来は誤り である。繰り返すと、HTMLでは、あくまでも、文書の構造を記述するものであっ て、文書の表示方法を記述するものではない。

◆リスト(箇条書)

HTML でリスト(list,並び)とは、箇条書を作るための機能である。HTML で 扱える箇条書には、次のような種類がある。

以下にその例を示する。

HTML記述:

<UL>
<LI>第一学群 
<LI>第二学群 
<LI>第三学群 
<LI>体育専門学群
<LI>芸術専門学群 
<LI>医学専門学群 
</UL>

表示:

UL の表示例

HTML記述:

<OL>
<LI>第一学群 
<LI>第二学群 
<LI>第三学群 
<LI>体育専門学群
<LI>芸術専門学群 
<LI>医学専門学群 
</OL>

表示:

OL の表示例

HTML記述:

<DL>
<DT> mnews
<DD> ネットワーク・ニュースと電子メールを読み書きするプログラム。
<DT> mule
<DD> テキスト・エディタの1つ。
<DT> netscape
<DD> WWWブラウザ。
<DT> chat
<DD> 文字による会議システム。
</DL>

表示:

DL の表示例

リストは、入れ子構造にする(nest)ことができる。つまり、リストの中でまた リストを使うことができる。

HTML記述:

<UL>
<LI> 学群・学類
    <UL>
    <LI>第一学群 
    <LI>第二学群 
    <LI>第三学群 
    <LI>体育専門学群
    <LI>芸術専門学群 
    <LI>医学専門学群 
    </UL>
<LI> 大学院 
    <UL>
    <LI>修士課程 
    <LI>博士課程
    </UL>
</UL>

表示例:

UL の入れ子の表示例

◆ハイパーリンク(アンカ)

HTML で、<A></A> で囲まれて いる部分は、アンカ(anchor)と呼ばれている。アンカは、ハイパーリンクの 始点と終点を表現している。 ハイパーリンクの始点は、リンクの頭(head)、 終点は、リンクの尾(tail)とも呼ばれる。(HTMLの解説書の中には、始点を リンク、終点をアンカと呼んでいるものもある。)

次の例を考える。

<A HREF="http://www.tsukuba.ac.jp/welcomeJ.html">筑波大学</A>

ハイパーリンクの始点の表示例

ここで、「筑波大学」というテキストが、ハイパーリン クの始点になっている。このハイパーリンクの終点は、URL http://www.tsukuba.ac.jp/welcomeJ.htmlで表わされた 資源(ファイル)である。これは、Aタグ中の HREF (Hyper REFerence) という属性によって指定され ている。

上のリンクは、絶対形式の URL が使われてた。次の例は、相対形式のURLが使 われている。

<A HREF="english.html">[English]</A>

ここで、「[English]」というテキストが、ハイパーリ ンクの始点になっている。

たとえば、このデータが URL http://www.ipe.tsukuba.ac.jp/~s976543/index.html の中で使われたとする。すると、"english.html" とい う相対形式の URL は、絶対形式では http://www.ipe.tsukuba.ac.jp/~s976543/english.html となる。

上の2つ例では、ハイパーリンクの終点は、別のファイル(全体)である。ハ イパーリンクの終点は、同じファイル内、あるいは、別のファイルにあるテキ ストのある一部分を差し示すこともできる。この時には、NAME属性付のアンカ と破片識別子(fragment identifier)を使う。以下の記述は、文 書内の特定のテキストにハイパーリンクの終点を作る。

<H2><A NAME="boston">Boston</A><H2>

このように、ハイパーリンクの終点は、普通見出しが使われる(見出しでなく てもよい)。ここで、NAME属性の値 "boston" は、文書 の中で唯一でなければならない。つまり、同じもがあってはならない。

このハイパーリンクの終点を差し示すためには、同じ文書内の場合、次のよう に HREF属性として、「#」で始まる文字列を指定する。

This is New York. That is <A HREF="#boston">Boston </A>.

このように、「#」で始まる識別子が破片識別子である。 異なるファイルの場合は、次のようにする。

This is Tsukuba. That is <A HREF="usa.html#boston">Boston</A>.

これは、"usa.html" というファイルの中にある <A NAME="boston"></A>で作 られたアンカへのハイパーリンクである。

◆インライン・イメージ

HTML では、テキスト・データの他にイメージ・データを差し示すこともでき る。その1つの方法は、ハイパーリンクの終点に、イメージ・データを置くこ とである。これは、<A HREF="file.gif"> のように、HREF 属性としてイメー ジ・データの URL を指定すればよい。もう1つの方法は、インライン・イメー ジである。インライン・イメージとは、テキストの途中に表示されるイメージ である。これは、次のように記述する。

<IMG SRC="logo.gif" ALT="筑波大学">

ADDRESSの表示例

ここで、タグ <IMG> がインライン・イメージを意味す る。<IMG> では、終了のタグは、不要である。 SRC属性に、テキストの途中で展開して表示するイメー ジの URL を指定する。ALT属性は、イメージの代わり に表示されるテキストを指定する。これは、Netscape などのブラウザのオプ ションとして、「画像の自動読み込み(Auto Load Images)」がオフになっている時に、イメージに代わって表示される。

ADDRESSの表示例

さらに、Lynx などのように、イメージが表示できないブラウ ザにより使われたり、目の不自由な人がイメージを表示させない時に使われる。

IMGタグのSRC属性では、絶対形 式のURL使うことができる。たとえば、次のように書くこともできる。

<IMG SRC="http://www.iep.tsukuba.ac.jp/~s976543/cat.gif" ALT="[猫の写 真]">

インライン・イメージとしては、GIF (CompuServe Graphic Image Format) と 呼ばれる形式、または、JPEG (Joint Photographic Experts Group)を使うと よい。GIF, JPEG は、多くのブラウザでインライン・イメージとして表示可能 である。

◆アドレス

HTML文書の最後には、普通、 <ADDRESS>,</ADDRESS>タグを使っ て、その文書の著者の電子メール・アドレスが記述される。アドレスを付ける ことは、このページの内容にきちんと責任を持つことを示している。

HTML記述:

<ADDRESS>
s976543@iep.tsukuba.ac.jp
</ADDRESS>

表示例:

ADDRESSの表示例

◆文字飾り

見出しやハイパーテキストの始点は、ブラウザによって自動的にフォントの大 きさが変えられたり、色が変えられたり、下線が着けられたりする。それ以外 に、文書内の単語を太字にしたり斜体にしたりする機能がある。これを文字飾 りという。

文字飾りには、論理スタイルタグと物理スタイルタグの2種類がある。論理ス タイルタグとは、「強調」、「引用」、「キーボード」など、文書の論理的な 構造を表わすためのものである。どのように表示されるかは、ブラウザに任さ れる。一方、物理スタイルタグは、「太字」、「イタリック」、「タイプライ タ・フォント」とった具体的な表示方法を表わすためのものである。

物理スタイルタグは、文書の構造を記述するというHTMLの方針の、例外的な機 能である。HTML文書では、できるだけ論理スタイルタグを用いて記述する方が よい。物理スタイルは、将来的には廃止される可能性もある。逆に、ワープロ の文書を HTML に自動的に変換するプログラムでは、物理タグが多数混じるこ ともある。

文字飾りについては、5章の付録にある「HTML簡易マニュアル」を参照せよ。

◆整形済みテキスト

整形済みテキストとは、文字端末(telnet や kterm)に表示されたコンピュー タの出力である。たとえば、telnetの画面の様子をHTMLの文書に張り付けたい とする。この場合、 <PRE></PRE> で該当部分を囲む。 これにより、空白やタブや改行がそのまま有効になる。

HTML記述

<PRE>
   April 1997
 S  M Tu  W Th  F  S
       1  2  3  4  5
 6  7  8  9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
</PRE>

   April 1997
 S  M Tu  W Th  F  S
       1  2  3  4  5
 6  7  8  9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30

表示例

ADDRESSの表示例

<PRE></PRE>の中でも、 「<」,「>」, 「&」という文字は、解釈される。よって、 <PRE></PRE>の中でこれらの文 字を使いたいときには、次のように記述する。

--------------------------------------------------------------------
表示    HTML中の記述    元の英単語
--------------------------------------------------------------------
<       &lt;            less-than
>       &gt;            greater-than
&       &amp;           ampersand
--------------------------------------------------------------------

◆引用

他の文書からの引用を表現するために、HTMLには、 <BLOCKQUOTE>,</BLOCKQUOTE> というタグが用意されている。これは、しばしば段付け(字下げ)されて表示 される。段付けのために、 <BLOCKQUOTE>,</BLOCKQUOTE> を使うのは、本来は、誤りである。

◆音声データ

イメージと同じように、<A HREF="url"> により、音声 データ(音楽も含む)を持っているファイルをリンク先に指定することもでき る。このリンクを手繰ると、ブラウザは、外部の音声再生用のプログラムを起 動したり、あるいは、「プラグイン」と呼ばれている特殊なプログラムを実行 して、その内容を演奏する。

◆よくある質問とその答え

(Q1) 字を大きくしたい。

(A1) HTML の思想では、本来はできないはずであった。しかし、字を大きくす るためのタグを含む HTML の拡張が提案されている。それについては、WWW上 にもたくさんの解説がある。たとえば、次のページが参考になる。

http://www.three-a.co.jp/~kmuto/html/

武藤 健志,HTML文書作成マニュアル Ver4.0

(Q2) 改行したい

(A2) <BR> というタグを使えば改行できる。見る人に よってブラウザのページの大きさが違うことを考えて、 <BR> を利用すること。小さな画面で見ている人にとっ ては、<BR>が入っていると、見づらくなる。

(Q3) 字下げしたい

(A3) 漢字の空白を打つのが簡単である。 <BLOCKQUOTE>,</BLOCKQUOTE> を使う方法もある。

(Q4) 「<A HREF="電子メール・アドレス">」が働かない。

(A4) 「<A HREF="mailto:電子メール・アドレス">」と 書く。これでタグ付けされたテキストをクリックすると、ブラウザは、電子メー ルを書くためのウィンドウを開く。ただし、ブラウザによってはこのタグは解 釈できないので、目に必ず見える形でも電子メール・アドレスを入れること。

■ホーム・ページの作成

サンプルのホーム・ページや、散策で見つけたページを参考にして、自分のホー ム・ページを作成しなさい。

◆URL

筑波大学教育用計算機システムでは、個人のホーム・ページの URL は、次の ようになる。

http://www.ipe.tsukuba.ac.jp/~ログイン名/index.html

ログイン名は、kterm や telnet でサーバ(Sun, icho) に接続する時に、login: に対して打つもの (s学籍番号)である。パスワードではない。

WWWサーバの働きにより、例外的に、index.html というファイル名 だけは、省略することもできる。よって、次の短い URL も個人のホーム・ペー ジの URL として有効である。

http://www.ipe.tsukuba.ac.jp/~ログイン名/

index.html は、ホーム・ページを表わすファイル名としてよく利用 されるものの1つである。正確には、これは、ディレクトリ名だけが指定され た時に使われるファイルの名前である。index.html 他に、 Welcome.html というファイル名も多く利用されている。

◆ファイル

上の URL は、サーバ上の次の名前のファイルを差し示すことになる。

~/www/index.html

つまり、個人のホーム・ページを作成するには、サーバ上で、この名前のファ イルを作成し保存すればよい。「~」 は、ホーム・ディレクトリを意 味する。「~/www」 は、ホーム・ディレクトリの下に作成された、 「www」という名前のディレクトリを意味する。なお、「www」 の他に、「public_html」 という名前もよく使われる。

このディレクトリは、サーバ上のシェル(「% 」が表示される 画面、コマンドモード)に対して、次のように打ち込むと作成することができ る。

--------------------------------------------------------------------
% mkdir ~/www   [←]
% []
--------------------------------------------------------------------

この操作は、一度だけ行えば十分である。

こうして作成したディレクトリ ~/www/ の下に、index.html という名前のファイルを作成する。テキスト・エディタ(下の例では mule ) を使ってこのファイルを作成(編集)する時には、次のように打つ。

--------------------------------------------------------------------
% mule ~/www/index.html [←]
--------------------------------------------------------------------

◆WWWブラウザによる表示

作成したページを表示するには、Netscape (パソコンでもサーバでもどちらで 動いていてもよい)に対して、上の URL を与える。つまり、開く(open)ボタン を押し、上の URL を打ち込み、最後にリターンを打つ。

kterm でログインしている時には、次のようにして、サーバ上で Netscape を 実行して、内容を表示させることもできる。

--------------------------------------------------------------------
% netscape ~/www/index.html & [←]
--------------------------------------------------------------------

あるいは、ファイル(File)メニューから、「ファイルを 開く(Open File)」を選ぶ方法もある。

エディタで修正し保存しても、netscape の画面は変化しない。この時には、 Netscape の再読込(Reload)ボタンを押す。これで、先ほど保存し た結果が反映される。

◆サンプルの利用

最初からすべてを作るのではなく、既に存在するサンプルから出発する方法が ある。サンプルは、次のディレクトリに保存されている。

~yshinjo/www/sample/

まず、サンプルを観察する。kterm でログインして、次のように打つ。

--------------------------------------------------------------------
% netscape ~yshinjo/www/sample/ & [←]
% []
--------------------------------------------------------------------
あるいは、Netscape 対して次の URL を開くようにする。

http://www.ipe.tsukuba.ac.jp/~yshinjo/sample/

こうして、自分が好きなサンプルを選ぶ。たとえば、7番のサンプルを選んだ 場合は、次のようにしてそれをコピーする。

--------------------------------------------------------------------
% mkdir ~/www    [←]
% cp ~yshinjo/www/sample/7.html ~/www/index.html    [←]
% mule ~/www/index.html    [←]
% mule ~/www/index.html    [←]
...
% mule ~/www/index.html    [←]
% []
--------------------------------------------------------------------

mkdir コマンドは、~/www という名前のディレクトリ を作るものである。この操作は、一度だけ行うこと。cpコマン ドは、サンプルのファイルを自分のホーム・ページのファイルへコピーするす るものである。この操作は、一度だけ行うこと。2回以上行うと、それまでに 編集した結果がすべて失われる。そしてコピーした内容をエディタ mule で修 正する。

◆インターネット上の他のページを真似る

サンプルを真似て作るのではなく、インターネット上の他のページを真似て作 ることもできる。真似をするには、真似をしたいページを表示して、 表示(View)メニューの 「文書のソース(Document source)」を選ぶ。すると、新し いウィンドウが開き、画面にもとの HTML 形式の文書が表示される。

表示(View)メニューの「文書のソース(Document source)」ではなく、ファイル(File)メニューの「別名 で保存(Save As)」を利用する方法もある。つまり、真似をしたいページをファ イルに保存して、それをサンプルとして利用することもできる。保存する時に は、種類(Format for Saved Document )として、「ソー ス(Source)」を選ぶ。これにより、HTML で書かれたページは、そのまま HTML で保存される。こうして保存したファイルは、cp コマン ドで ~/www/index.html にコピーするか、 mv コマン ドで、名前を変更する。

◆ホーム・ページ作成作業のまとめ

最終的には、ホーム・ページ作成の作業は、次のような作業になる。

最初に一度だけやるもの。

  1. シェルの画面(「% 」)で、mkdir ~/www
  2. 必要なら、サンプル、または、インターネット上の真似をしたいページを ~/www/index.html という名前のファイルにコピーする。

以後、次の作業の繰り返しになる。

  1. Netsape のウィンドウから mule が動いているウィンドウに切り替える。
  2. mule を操作して、~/www/index.html というファイルの内容を 修正し、保存する(C-x C-s)。ただし、保存しても mule を終了しな い。
  3. mule が動いているウィンドウから Netsape のウィンドウに切り替える。
  4. Netscape で、再読込(Reload)ボタンを押し、内容を確認 する。

~/www/index.html というファイル名は、広くインターネットに公開 されるホーム・ページと同じ名前のものである。実習課題としてWWWページ作 りを行えば、自動的にインターネットに対して作成したホーム・ページが公開 されることになる。もし、実習で作成するホーム・ページとインターネット公 開用のホーム・ページを変えたい時には、教官に実習用のホーム・ページの URL を連絡しなさい。

■ページの内容

個人のホーム・ページには、どのような内容を載せればよいか。どんなWWW ページでも言えることは、次のようなことである。

  1. 独自性(originality)の高い内容、世界中に他に類似のものがないようなもの。
  2. 大勢の人から有益に使えるもの。自分自信でも、他の人のページにあるといい なあと思うようなもの。

個人のホーム・ページの場合には、次のような内容のものが期待されている。

  1. 自分の名前(漢字がある人は漢字、読み方(平仮名かローマ字))
  2. 画像(自分の写真など)
  3. 関連情報へのリンク。
  4. 電子メール・アドレス。

特に、ページの末尾に付ける電子メール・アドレスは、重要である。電子メー ル・アドレスを付けることは、このページの内容にきちんと責任を持つことを 示している。電子メール・アドレスの重要性は、HTML にそれを記述するため の特別のタグ <ADDRESS>タグが存在することからもわ かる。電子メール・アドレスは、普通、ページの最後に次のように書かれる。

<ADDRESS>s976543@ipe.tsukuba.ac.jp</ADDRESS>

逆に、WWWページに含めないほうがよい情報には、次のようなものがある。

  1. 法律を犯しているもの。特に著作権法に注意する。
  2. 他人のプライバシを侵害しているもの。
  3. インターネットに広く掲載するに値しない情報。

◆著作権について

インターネットは、非常に高性能のコピー・マシンであると考えられる。あな たが作成したWWWページやあなたが投稿したネットワーク・ニュースの記事 は、インターネットへ接続された多くの計算機にコピーされる。また、雑誌の 付録として、CD−ROMにコピーされることもある。よって、他の人の著作 物を自分のWWWページやネットワーク・ニュースの記事に取り込んで投稿す る時には、細心の注意が必要になる。

著作権法では、「引用」という言葉を定義している。著作権法に よると、次のように著作物を「引用」することができると定めている。

   著作権法(昭和四十五年法律第四十八号)

   第二章 著作者の権利

    第三節 権利の内容

     第五款 著作権の制限 (引用)

第三十二条 公表された著作物は、引用して利用することができる。この場合 において、その引用は、公正な慣行に合致するものであり、かつ、報道、批評、 研究その他の引用の目的上正当な範囲内で行なわれるものでなければならない。

2 国又は地方公共団体の機関が一般に周知させることを目的として作成し、 その著作の名義の下に公表する広報資料、調査統計資料、報告書その他これら に類する著作物は、説明の材料として新聞紙、雑誌その他の刊行物に転載する ことができる。ただし、これを禁止する旨の表示がある場合は、この限りでな い。

「正当な範囲内」ならば、「公表された著作物」を安心して「引用」すること ができる。ただし、「正当な範囲内」がどこまでかは、非常に難しい。著作物 の中で特に厳しい扱いを受けているのは、文学作品や歌詞である。これらは、 表現そのものに価値があるものだからである。他人の著作物である歌詞を、自 分のWWWページに書いたり、ネットワーク・ニュースの記事に取り入れて投 稿した場合、歌詞を作った人から著作権侵害で訴えられる可能性もある。他人 の著作物を自分の記事に取り込む場合は、常に「正当な範囲内の引用に当たる か」、「公正な慣行に合致するもの」かを注意する。

引用する時には、必ず元の著作物が何であるかを必ず明示する。本ならば、著 者、出版社、発行年、ISBN などを書くとよい。

著作権法は、インターネットが発達する以前の法律である。インターネットの 時代では、合わない部分がたくさんある。基本的に著作権法は、放送局や出版 社、それに、レンタル・レコード店といった業者を想定して作られている。著 作権法が制定された時には、個人の力が弱く、個人が著作権を侵害して被害を 与えるとは考えられていなかった。インターネットは、個人の力を大きく拡大 する。著作権法もインターネットの出現に合わせて大きく修正されることにな るであろう。

著作権法の全文が、以下のページにある。

http://www.ntt.co.jp/japan/misc/copyright.html

以下の URL には、法律の専門家の立場からのWWWと著作権の話が記載され ている。

http://kaga.law.osaka-u.ac.jp:80/~kagayama/HowtoHTML/OnHomepageJ.html

◆長さ

既にワープロなどで作成した文書から WWW ページを作る時には、ページの長 さに注意する。WWWのページとしては、適切な長さがある。長すぎると、遅い 回線からアクセスしている人には、応答が悪くなる。また、細かいページに分 割しすぎた場合、ページを手繰る操作がわずらわしくなる。

◆チェック項目

WWWのページを作る際に注意すべき点をまとめる。

■参考資料

この手引きに関して追加情報が、次のページにある。

http://www.ipe.tsukuba.ac.jp/~yshinjo/tebiki/

ここからは、同じ情報処理(実習)でWWWページ作りをしている他のクラスの様 子を見ることができる。

WWWページ作りに関連して、次のようなページが参考になる。

http://www.ntt.co.jp/SQUARE/howto.html

NTTのWWWに関する日本語による解説の索引

http://www.ntt.co.jp/people/takada/docs/www-intro/

高田敏弘,World-Wide Web

http://www.icsd6.tj.chiba-u.ac.jp/FAQ/WWW/www_faq_jp.html

あさだたくや訳,World Wide Web Frequently Asked Questions

http://ringo.sfc.keio.ac.jp/otherdocuments/html.html

Kenji Yasaka,HTML入門

http://www.ntt.co.jp/docs/html-jman/ncsa-j.html

三浦 & 稲村,初心者向きHTMLガイド

http://w3.lab.kdd.co.jp/technotes/

堀田孝男,(WWW関連の)技術メモ

http://www.three-a.co.jp/~kmuto/html/

武藤 健志,HTML文書作成マニュアル Ver4.0

(注意:次の書類のURLが変った。
http://cogsci.l.chiba-u.ac.jp/~kmuto/jp/html/html.html

武藤 健志,HTML文書作成マニュアル Ver3.24

)
http://www.ntt.co.jp/japan/misc/copyright.html

著作権法

http://kaga.law.osaka-u.ac.jp:80/~kagayama/HowtoHTML/OnHomepageJ.html

大阪大学法学部加賀山、専門家の立場からのWWWと著作権の話


Last updated: 1998/02/13 18:25:09
Yasushi Shinjo / <yas@is.tsukuba.ac.jp>