HTMLによるWWWページ作成

共通科目情報処理(実習)、国際総合学類対象、1997年01月17日

                                       電子・情報工学系
                                       新城 靖
                                       <yas@is.tsukuba.ac.jp>

このページは、次の URL にあります。
http://www.hlla.is.tsukuba.ac.jp/~yas/ipe/kokusai2-enshu-1996/1997-01-17 /www-html.html
あるいは、次のページから手繰っていくこともできます。
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/~yshinjo
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 の構文と意味、 ハイパーリンクの作成方法、イメージ・データの扱いについて説明しています。

◆ハイパーメディアとマルチメディア

The World-Wide Web (WWW) は、ハイパーメディアに基づく広域情報提供シス テムです。ハイパーメディアとは、マルチメディアが発展し、他の情報への参 照を含むようになったものです。マルチメディアとは、従来の文字や数値といっ たデータに加えて、制止画像、動画像、音声といったデータを統合的に扱うこ とを意味します。マルチメディアの段階では、文字の他に音声データや画像デー タが並んでいるだけです。ハイパーメディア・データは、そのようなデータの 他に、他のデータへの参照(ポインタ、ハイパーリンクと呼ばれる)を含んで います。

ハイパーメディアの特徴は、参照を手繰って他の情報に簡単に移動することが できる点にあります。データとしてテキストしか含まれていない場合は、ハイ パーテキストと呼ばれます。

◆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クライアントは、サー バから取ってきたデータを画面に表示するプログラムです。

◆HTML

人間が会話や文書に使っている言語を自然言語といいます。これに体して、コ ンピュータで扱うために考え出された言語を人工言語といいます。コンピュー タ用の人工言語で、プログラムを書くために作られた言語は、プログラミング 言語と呼ばれています。人工言語には、プログラミング言語の他に、マークアッ プ言語があります。

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

HTML は、文書の構造を記述することができます。HTML で記述できる文書の構 造の例を、以下に示します。

HTML では、文書の構造を記述することができますが、表示の方法を記述する ことはできません。表示の方法とは、文字のフォント、大きさ、色、行間など のことです。表示の方法は、それを表示するプログラム(ブラウザ)によって 決められます。(例外として、以下で述べる物理スタイルタグがあります。ブ ラウザによっては、物理スタイルタグが無視されます。)ブラウザとしては、 Netscape, Lynx, Mosaic が有名です。

◆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におけるホーム・ページとは、ある一連の情報にアクセスするために、最 初にアクセスされることが想定されて作られているページです。ホーム・ペー ジには、次のような種類があります。

この実習では、個人のホーム・ページを作成します。

■個人のホーム・ページのサンプルの観察

次の URL にある個人のホーム・ページのサンプルの観察してみます。

http://www.ipe.tsukuba.ac.jp/~s991001/index.html
~は、画面、キーボード、プリンタで形が違う事があります。 とあったり、となっていたりします。

このためには、まず X Window を使ってログインします。次に、コマンドモードの画面(「%が出て いる画面」)にします。そして、次のようにして Netscape を実行します。

----------------------------------------------------------------------
% ~yshinjo/bin/netscape-fmr & [←]
% []
----------------------------------------------------------------------
このように、行末に「&」を付けて実行すると、すぐに「%」が表 示されます。これで、Netscape を使いながら他のプログラム(エディタや lessコマンド)を同時に使うことができるようになります「&」 を付けない場合は、Netscape が終了するまで他のプログラムを実行すること ができません。

Netsape の Open ボタン ( [Netscape の Openボタン] ) を押し、出てきた窓に、上の URL (http://www.ipe.tsukuba.ac.jp/~s991001/index.html)を打ち込みま す。(注意:下の図では、一部文字が隠れて見えなくなっています。 キーボードから打ち込んでいくと、横にずれて最後まで打てます。 打ち間違えた時には、左文字削除で打ち直すか、Clear を押して最初から 打ち直すか、マウスで打ち直したい場所にカーソルを動かして 打ち直すようにします。)

[Netscape の Open窓]

こうして現われた Netscape の表示のもとになっているファイルをless コマ ンドで観察します。元のファイルの名前は、次の通りです。

~s991001/www/index.html
このファイルを観察するには、「%」が表示されている窓にキーボードのを切 り替えて(マウスのポインタを「%」が表示されている窓に入れる)、「%」に 対して次のように打ちます。(「%」が表示されていない時には、リターンキー [←] を打ってみます。それでも表示されない時には、Netscape を実行す る時に「&」を付けていなかったことが考えられます。その時に は、Netscape を終了して、「&」付きで実行し直す所から始めま す。)
----------------------------------------------------------------------
% less ~s991001/www/index.html [←]
----------------------------------------------------------------------
(less コマンドの終了は、q。1ページ進めるのは、 スペース。)

less コマンドで観察する代りに、Netscape の View メニューの Document Source を選ぶ方法もあります。すると、新しい窓が開い て、その窓にファイルの内容が表示されます。

[Netscape の Viewメニュー]

Netscape の変わりに、lynx でページを表示させることもできます。 それには、次のように打ちます。

----------------------------------------------------------------------
% ~yshinjo/bin/lynx http://www.ipe.tsukuba.ac.jp/~s991001/index.html [←]
----------------------------------------------------------------------
あるいは、次のように打ちます。
----------------------------------------------------------------------
% ~yshinjo/bin/lynx ~s991001/www/index.html [←]
----------------------------------------------------------------------
lynx では、「\」キー(「\」キー)を押すことで、元の HTML による記述と整形された表示を切り替えることができます。

そのファイルの内容を、以下に示します。


--------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE>
Shinjos Home Page / 新城 靖のホーム・ページ
</TITLE>
</HEAD>

<BODY>

<P><A HREF="index-e.html">[English]</A></P>

<H1>新城 靖 / SHINJO,Yasushi </H1>

<P><IMG SRC="shinjo-pict-1996-09-02.gif" ALT="新城の写真"></P>

<P>
新城のホーム・ページ(共通科目情報処理実習)へようこそ。これは、個人の
ホーム・ページのサンプルです。それぞれ工夫を凝らしてください。これをコ
ピーして自分のページを作る人は、名前や電子メールのアドレスを全部自分の
ものに置き換えてください。
</P>

<H2>所属</H2>
<UL>
    <LI> <A HREF="http://www.tsukuba.ac.jp/welcomeJ.html">筑波大学</A>/
	第3学群/
	 <A HREF="http://www.kokusai.tsukuba.ac.jp/japanese/index-j.htm">国際総合学類</A>
    <LI> 電子メール:yshinjo@ipe.tsukuba.ac.jp
</UL>

<H2>私が見つけた面白いページ</H2>

<DL>
<DT> <A HREF="http://www.netshop.net/Startrek/web/">
	Brigitte Jellinek さんのスタートレックのページ。
	スタートレックに関するインターネット上の資源へのリンク集を含んでいます。
<DT> <A HREF="http://bin.gnn.com/cgi-bin/gnn/currency?Japan">通貨交換レート</A>
<DD>	海外旅行に出かける前には、ここをチェック。
        円高になつたころを見計らって両替/トラベラーズ・チェックの購入に
	出かけます。
<DT><A HREF="http://www.tsukuba.ac.jp/hibun/yuji/myhome-j.html">
	山本有二さん(比較文化学類4年生)のホーム・ページ。</A>
<DD>	卒業論文をこうしてWWWで発信できます。
	文系向きのリンク集やWWWの解説があります。

<DT><A HREF="http://www.notredame.ac.jp/POETS/index-j.html">
	POETS (Personalized Online Electronic Text Services)</A>
<DD>	英和辞書、和英辞書、シソーラスなどのがあります。
	ノートルダム女子大学の研究プロジェクト POETS の成果です。
</DL>

<H2><A HREF="http://www.hlla.is.tsukuba.ac.jp/~yas/ipe/kokusai2-enshu-1996/home-pages/">
国際総合学類情報処理実習2班の学生のホーム・ページ集にもどる</A>
</H2>
<HR>
Last updated: 1997/01/16 22:24:54 <BR>
<ADDRESS> 
yas@is.tsukuba.ac.jp
</ADDRESS>
</BODY>
</HTML>
--------------------------------------------------------------------
'

図1 個人のホーム・ページのサンプル

◆HTMLの文法

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

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

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

タグとし使われる英数字は、文字端末では、漢字の半分の幅で表示されます。 それらは、しばしば「全角」「半角」とよばれます。しかしながら、本質は表 示される文字の幅ではなく、その文字画どのようなコードで表現されているか にあります。(文字コード(符号)については、講義で少し話しました。 後でもう一度講義で話します。)

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

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

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

◆HTML文書の構造

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


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

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

このように、<HEAD>,</HEAD> で囲まれたヘッダと、 <BODY>,</BODY> で囲まれた本体から構成されます。 ヘッダの<TITLE>,</TITLE>で囲まれた部分は、タイ トルバーなどに表示されます。ヘッダでは、以下で説明する見出し、文字飾り、 ハイパーリンクを使うことができません。

◆見出し(heading)

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


--------------------------------------------------------------------
<H1>見出し</H1>
	パラグラフの並び
	<H2>見出し</H2>
	パラグラフの並び
		<H3>見出し</H3>
		パラグラフの並び
		<H3>見出し</H3>
		パラグラフの並び
	<H2>見出し</H2>
	パラグラフの並び
		<H3>見出し</H3>
		パラグラフの並び
	<H2>見出し</H2>
	パラグラフの並び
		<H3>見出し</H3>
		パラグラフの並び
--------------------------------------------------------------------

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

H1 から H3 までの見出しは、Netscape, Mosaic などのブラウザでは、標準で 普通の文字より大きな文字で表示されます。しかしながら、大きな文字で表示 させたるために、見出しの機能を使うのは誤りです。見出しがどのように表示 されるかは、ブラウザに依存しています。文字の大きさも、利用者が自由に変 えられるようになっています。見出しは、あくまでも章の構成を表わす目的で 使います。

◆パラグラフ

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

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

◆リスト(箇条書)

図1に示したサンプルでは、リスト(並び、箇条書)として、 <UL><LI>...<LI>...</UL> という形式が使われています。UL とは、Unordered List のことで、番号が着 かないリストを意味します。リストの1つ1つの要素は、<LI> (List Item)で記述します。<UL></UL> の変わりに、 <OL></OL> を使えば、番号付きリスト(Orderd List)になります。

図1では、リストとして、<DL> <DT> <DD> </DL> という形式も使われています。これは、 定義リスト(Definition List)と呼ばれている形式です。この形式では、 <DT>に続けて、定義する言葉(Definition Term)を指定し、 <DD>に続けて、その言葉の説明(Definition Document)を指定 します。

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

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

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

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

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

<P><A HREF="index-e.html">[English]</A></P>

ここで、「[English]」というテキストが、ハイパーリンクの始点になってい ます。このハイパーリンクの終点は、URL http://www.ipe.tsukuba.ac.jp/~s991001/index-e.html で表わされた資源 (ファイル)です。このように、URL の最後のファイル名だけが違っている時に は、URL(http://www.ipe.tsukuba.ac.jp/~s991001/)を省略することができま す。(正確には、この形式の URL は、相対形式 (relative form)と呼ばれて います。実際には、もう少し複雑な規則があります。)

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

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

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

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

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

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

This is Tokyo. 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="cat.gif" ALT="[猫の写真]">

ここで、タグ <IMG> がインライン・イメージを意味します。<IMG> では、終了 のタグは、不要です。SRC属性に、テキストの途中で展開して表示するイメー ジの URL を指定します。ALT属性は、イメージの代わりに表示されるテキストを 指定します。これは、Lynx などのように、イメージが表示できないブラウザに より使われたり、遅い回線を使ってアクセスしている人や目の不自由な人がイ メージを表示させない時に使われます。

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

◆アドレス

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

◆文字飾り

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

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

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

文字飾りについては、この実習項目の付録にある「付録A HTMLタグ・クイッ ク・リファレンス」を参照しなさい。

◆整形済みテキスト

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

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

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

◆引用

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

◆音声データ

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

■個人のホーム・ページの散策

★練習問題(1)

Netscape や Lynx を使って、WWWページを散策しなさい。そして、興味を 持ったページを2つ以上探してメモしなさい。

■ホーム・ページの作成

★練習問題(2)

サンプルのホーム・ページや、散策で見つけたページを参考にして、自分のホー ム・ページを作成しなさい。作成するホーム・ページは、次の名前のファイル に保存するとよい。

~/www/index.html

~ は、ホーム・ディレクトリを意味します。~/www は、ホー ム・ディレクトリの下に作成されたディレクトリの名前です。このディレクト リは、次のようにすると、作成することができます。

--------------------------------------------------------------------
% mkdir ~/www [←]
% []
--------------------------------------------------------------------
なお、~/www/は、ホーム・ディレクトリの下に www という 名前のディレクトリを作成し、そこを起点とすることを意味します。 www の他に、public_htmlという名前もよく使われます。

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

--------------------------------------------------------------------
% mule  ~/www/index.html [←]
--------------------------------------------------------------------
index.html は、ホームページを表わすファイル名としてよく利用さ れるものの1つです。その他に、Welcome.html というファイル名も 非常に多く利用されます。

これらのファイル名は、WWW サーバ(httpd)の働きにより、次のような URL で参照可能となります。

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

ログイン名は、Sun に接続して、login: に対して打 つもの(s学籍番号)です。 ただし、例外的に、index.html というファイル名だけは、省略する こともできます。

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

サンプルを元に、自分のホーム・ページを作成する時には、次のように、サン プルをコピーします。(コピーする前に、mkdir で ~/wwwというディ レクトリを作成しておくこと。)

--------------------------------------------------------------------
% cp ~s991001/www/index.html ~/www/index.html [←]
% []
--------------------------------------------------------------------

cpコマンドの働きにより、 ~s991001/index.html という名前のファイルの内容が ~/www/index.htmlという名前のファイルにコピーされます。

次に、コピーした内容をエディタ mule で修正します。

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

修正が完了したら、保存(C-x C-s)します。mule を終了させる(C-x C-c)必 要はありません。

保存したら、次は Netscape を実行します。既に実行していたら、 Netscape にプログラムを切り替えます。

X Window では、Netscape の窓にカーソルを移動させます。

そして、Netsape の Open ボタン ( [Netscape の Openボタン] ) を押し、出てきた窓に、自分のホーム・ページの URL を打ち込みます。

http://www.ipe.tsukuba.ac.jp/~ログイン名/index.html
あるいは、短縮形を打ちます。
http://www.ipe.tsukuba.ac.jp/~ログイン名

もし、既に自分のホーム・ページが表示されていたとしても、 先ほどエディタで ~/www/index.html を修正して保存(C-x C-s)した内容は、表示されていません。保存した内容を Netscape に読み込ませるには、Reload 機能を使います。Reload 機能を使 うには、Reload ボタン( [Netscape の Reloadボタン] ) を押すか、View メニューから Reload を選びます。

最終的には、ホーム・ページ作成の作業は、次の繰り返しになります。

  1. プログラムを、Netsape から mule が動いている窓に切り替える。 (マウスのポインタの移動)
  2. mule を操作して、index.html というファイルの内容を修正し、 保存する(C-x C-s)。ただし、保存しても mule を終了しない。
  3. プログラムを、Netsape に切り替える。(マウスのポインタの移動)
  4. Netscape で、Reload ボタンを押す。内容を確認する。

ホーム・ページ散策で見つけたホーム・ページを元に自分のホーム・ページを 作る時には、それを元にして作業を始めることもできます。そのためには、見 つけたページをファイルに保存します(Fileメニューの Save As)。保存する時には、Format for Saved DocumentSource にして、保存します。これで、HTML で書かれ たページは、そのまま HTML で保存されます。

こうして保存したファイルは、cp コマンドやmv コマンドで、名前を変更して、~/www/index.htmlにします。

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

ホーム・ページには、次のような情報を含めなさい。

イメージ・データを作成するには、次のような方法があります。

自分のホーム・ページで発信する情報としては、オリジナリティの高いものが 望まれます。

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

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

◆著作権について

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

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

--------------------------------------------------------------------

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

第二章 著作者の権利

第三節 権利の内容

第五款 著作権の制限

(引用)

第三十二条

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

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

--------------------------------------------------------------------

著作権法によると、「正当な範囲内」ならば、「公表された著作物」を安心し て「引用」することができます。ただし、「正当な範囲内」がどこまでかは、 非常に難しい問題です。

著作物の中で特に厳しい扱いを受けているのは、文学作品や歌詞です。これら は、表現そのものに価値があるからです。他人の著作物である歌詞を、自分の ホーム・ページに書いたり、ネットワーク・ニュースの記事に取り入れて投稿 した場合、歌詞を作った人の著作権を侵害している能性があります。他人の著 作物を自分の記事に取り込む場合は、常に「正当な範囲内の引用に当たるか」 を注意する必要があります。それから、元の著作物が何であるかを必ず明示す るといいでしょう。たとえば本ならば、著者、出版社、発行年、ISBN などを 書くとよいです。

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

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

これは、fj に投稿された記事が元になっています。

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

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

(注意:Netscape, lynx に与える時には、1行にすること。)

■参考資料

同じ情報処理実習で、比較文化学類1班もWWWページ作りをしています。 その解説が、次のページにあります。

http://www.ipe.tsukuba.ac.jp/~tah/
堀内先生のページ。比較文化学類1班(共通科目情報処理実習)用。

初級・中級と分かれているので、見やすくなっています。ここで紹介されてい るサンプル ~tah/www/sample.html をコピーして始めてもいいでしょ う。

その他に、次のようなページが参考になります。

■HTMLクイック・リファレンス

■国際総合学類学類2班の学生のホーム・ページ一覧


[file-dir] [mnews/save] [mnews/read] [mnews/post] [X Window] [Netscape] [HTML] [HTML Ref]
↑[国際2班] ←[1月10日] ・[1月17日] →[1月24日] [課題一覧]
Last updated: 1997/01/23 15:32:19
Yasushi Shinjo / <yas@is.tsukuba.ac.jp>