日本語・日本語文化学類２班,1996年10月14日

HTMLによるWWWページ作成

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

このページは、次の URL にあります（１行で打つこと）。
http://www.hlla.is.tsukuba.ac.jp/~yas/classes/ipe/nitiniti2-enshu-1996/1996-10-14/ www-html.html'

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

■WWWとHTML

このページでは、インターネット上の情報提供・探索システムの１つである 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を定義する３つの規約(HTML, URL, HTTP)

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

HTML (HyperText Markup Language): これは、ハイパーメディア情報を記述するための言語です。
URL (Uniform Resource Locator): これは、ハイパーメディア情報をアドレス付けする文字列です。URL は、HTML におけるハイパーリンクの表現に使われます。
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/

~は、画面、キーボード、プリンタで形が違う事があります。 ～とあったり、￣となっていたりします。Macintosh では、 1 の左の「～/｀」のキーで打てます。「~」は、上段なので、シフトを押しながら打ちます。

これを、Netsape の Open ボタン ( ) を押し、出てきた窓に、上の URL を打ち込みます。

[Netscape の Open窓]

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

~s991001/www/index.html

このファイルを観察するには、Telnet にプログラムを切り替え、コマンドモードで次のようにします。

----------------------------------------------------------------------
% cd ~s991001/www/ 
% ls 
classes.html                shinjo-pict-1996-09-02.gif
index.html
% less index.html 
% 
----------------------------------------------------------------------

(less コマンドの終了は、q。１ページ進めるのは、スペース。)

less コマンドで観察する代りに、Netscape の View メニューの Source を選んでもよい。すると、SimpleText というアプリケーション(プログラム)が実行され、そのアプリケーションの窓にファイルの内容が表示されます。

Lynx では、「\」キー（「\」キー）を押すことで、元の HTML による記述と整形された表示を切り替えることができます。

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


--------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE>
新城のホーム・ページ（IPE，サンプル）
</TITLE>
</HEAD>

<BODY>

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

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

<P>
新城のホーム・ページ（共通科目情報処理実習用サンプル）へようこそ。これ
は、個人のホーム・ページのサンプルです。それぞれ工夫を凝らしてください。
</P>

<H2>所属</H2>
<UL>
    <LI> <A HREF="http://www.tsukuba.ac.jp/welcomeJ.html">筑波大学</A>／
	 <A HREF="http://www.is.tsukuba.ac.jp">電子・情報工学系</A>
    <LI> 電子メール：yas@is.tsukuba.ac.jp
    <LI> かたつむりメール：〒３０５　茨城県つくば市天王台１－１－１
</UL>

<H2><A HREF="classes.html">得意科目</A></H2>

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

<DL>
<DT> <A HREF="http://bin.gnn.com/cgi-bin/gnn/currency?Japan">通貨交換レート</A>
<DD>	海外旅行に出かける前には、ここをチェック。
        円高になつたころを見計らって両替／トラベラーズ・チェックの購入に
	出かけます。
<DT> <A HREF="http://yyy.tksc.nasda.go.jp/Home/Employ/Employ-j/astoroindex.html">宇宙飛行士募集</A>
<DD>	１９９５年の募集は終わりました。次はいつでしょう。
<DT>	<A HREF="http://europa.sk.tsukuba.ac.jp/HTTP95/Teams/TABETA-GIRLS/">
	たべたがーるず</A>
<DD>	筑波に住む甘いもの好きの人のためのケーキとパフェの店の紹介です。
１９９５年に社会工学類の学生、金児さん，北岡さん，並木さん，馬場さんの
共同の作品です。
</DL>

<H2>もどる</H2>

<UL>
    <LI><A HREF="http://www.tsukuba.ac.jp/welcomeJ.html">筑波大学</A>
    <UL>
	<LI><A HREF="http://www.ipe.tsukuba.ac.jp">共通科目情報処理</A>
	<LI><A HREF="http://www.tsukuba.ac.jp/sipc/sipc.html">学術情報処理センター</A>
	<LI><A HREF="http://www.is.tsukuba.ac.jp">電子・情報工学系</A>
    </UL>
    <LI><A HREF="http://www.hlla.is.tsukuba.ac.jp/~yas/index-j.html">
	    新城のホーム・ページ</A>
    <LI><A HREF="http://www.hlla.is.tsukuba.ac.jp/~yas/classes/ipe/nitiniti2-enshu-1996/home-pages.html">
	    日本語・日本文化学類２班の学生のホーム・ページ集</A>
    <LI><A HREF="http://www.ipe.tsukuba.ac.jp/~yshinjo/classes/ipe/nitiniti2-enshu-1996/home-pages.html">
	    日本語・日本文化学類２班の学生のホーム・ページ集(mirror)</A>
</UL>

<HR>
Last updated: 1996/10/13 18:25:36 <BR>
<ADDRESS> 
<A HREF="http://www.hlla.is.tsukuba.ac.jp/~yas">Yasushi Shinjo</A>
 / &lt;yas@is.tsukuba.ac.jp&gt;
</ADDRESS>
</BODY>
</HTML>
--------------------------------------------------------------------

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

◆HTMLの文法

上で示したように、HTML による文書は、「<>」で括られたキーワード（タグ）が埋め込まれたテキスト（ng, emacs などのテキスト・エディタで修正できるデータ）です。HTMLタグは、次のような形式になっています。

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

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

タグとし使われる英数字は、文字端末では、漢字の半分の幅で表示されます。それらは、しばしば「全角」「半角」とよばれます。しかしながら、本質は表示される文字の幅ではなく、その文字画どのようなコードで表現されているかにあります。（コードについては後で説明します。）

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

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

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

◆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>の部分で１行ほど空けます。今のブラウザでは、<P> を、パラグラフの先頭としてではなく、パラグラフの区切りを表わすものとして使った方が、見栄えがよくなることがあります。しかし本来、行間を空けるために <P> を使うのは誤りです。繰り返しますが、HTMLでは、あくまでも、文章の構造を記述するものであって、文章の表示方法を記述するものではありません。

◆リスト（箇条書）

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

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

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

◆ハイパーリンク（アンカ）

図１で、<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) という属性によって指定されています。

この例では、ハイパーリンクの終点は、別のファイル（全体）です。ハイパーリンクの終点は、同じファイル内、あるいは、別のファイルにあるテキストのある部分を差し示すこともできます。この時には、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 Tokyo. That is <A HREF="usa.html＃boston">BostonYHM_Escape().

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

◆インライン・イメージ

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

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

◆文字飾り

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

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

物理スタイルタグは、文書の構造を記述するという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 を使って、他人のホーム・ページ（個人のホーム・ページ）をいくつか散策しなさい。それらのホーム・ページの中で、よいと思ったページを２つ選び、報告しなさい。２つのうち１つは、必ず海外のサイトから選びなさい。（２つとも海外でもよい。）

■ホーム・ページの作成

★課題2:

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

~/www/index.html

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

--------------------------------------------------------------------
% mkdir ~/www 
% 
--------------------------------------------------------------------

index.html は、ホームページを表わすファイル名としてよく利用されるものの１つです。その他に、Welcome.html というファイル名も非常に多く利用されます。また、~/www/は、ホーム・ディレクトリの下に www という名前のディレクトリを作成し、そこを起点とすることを意味します。 www の他に、public_htmlという名前もよく使われます。

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

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

ログイン名は、Sun に接続して、login: に対して打つもの（s学籍番号）です。

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

--------------------------------------------------------------------
% cp ~s991001/www/index.html ~/www/index.html 
% 
--------------------------------------------------------------------

(10月14日に印刷して配った資料では、「

cp
~s991001/index.html ~/www/index.html

」となっていました。 www が抜けていました。)

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

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

--------------------------------------------------------------------
% ng ~/www/index.html 
--------------------------------------------------------------------

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

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

Macのプログラムの切り替え
右上のアイコンを押し、切り替えたいプログラムまでドラッグして離す。

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

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

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

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

プログラムを、Netsape から Telnet に切り替える。（右上のアイコン）
Telnet の窓で ng を実行して修正し、保存する(C-x C-s)。 (ただしngを終了しない。)
プログラムを、Telnet から Netsape に切り替える。（右上のアイコン）
Netscape で、Reload ボタンを押す。内容を確認する。

ホーム・ページ散策で見つけたホーム・ページを元に自分のホーム・ページを作る時には、それを元にして作業を始めることもできます。そのためには、見つけたホーム・ページをファイル（Macintosh のフロッピ）に保存します（Fileメニューの Save As）。保存する時には、HTML 形式で保存します。そして、それをファイル転送機能を使って、Sun へコピーします。

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

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

自分の名前(漢字がある人は漢字、読み方（平仮名かローマ字）)
インライン・イメージ（自分の写真が望ましい）。
メール・アドレス（<ADDRESS></ADDRESS>タグで記述すること）。
他の、自分が作ったHTML文書へのハイパーリンク。
お薦めのページへのハイパーリンク。

イメージ・データを作成するには、Macintosh のドロー・ツールやイメージ・スキャナを用います。これらの使い方は、また別のページで説明します。

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

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

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

インターネット上の大勢の人に公開すべき内容になっているか。
遅い通信回線から読む人のひとを考えているか。
文字端末からアクセスしている人に対して配慮がなされているか。
目の不自由な人に対して配慮がなされているか。
長さは、適当か。
イメージの大きさは、適当か。
目的の情報にたどり着きやすいように工夫されているか。
強調の使い方は、適当か。
特定のブラウザに依存した記述になっていないか。
イメージ・データの部分で、ALT属性が使われているか。
他人のプライバシーを侵害していないか。
他人の著作権を侵害していないか。

◆著作権について

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

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

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

著作権法（昭和四十五年法律第四十八号）

第二章著作者の権利

第三節権利の内容

第五款著作権の制限
（引用）
第三十二条
公表された著作物は、引用して利用することができます。この場合において、その引用は、公正な慣行に合致するものであり、かつ、報道、批評、研究その他の引用の目的上正当な範囲内で行なわれるものでなければならない。
国又は地方公共団体の機関が一般に周知させることを目的として作成し、その著作の名義の下に公表する広報資料、調査統計資料、報告書その他これらに類する著作物は、説明の材料として新聞紙、雑誌その他の刊行物に転載することができます。ただし、これを禁止する旨の表示がある場合は、この限りでない。

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

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

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

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

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

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

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

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

（注意：Netscape, lynx に与える時には、１行にすること。）

■参考資料

http://www.ntt.jp/SQUARE/howto.html
NTTのWWWに関する日本語による解説の索引
http://www.ntt.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.jp/docs/html-jman/ncsa-j.html
三浦 & 稲村,初心者向きHTMLガイド
URL_http://w3.lab.kdd.co.jp/technotes/ 堀田孝男, (WWW関連の)技術メモ
http://www.l.chiba-u.ac.jp/~kmuto/jp/html/html.html
武藤健志,HTML文書作成マニュアル Ver3.24
http://www.ntt.jp/japan/misc/copyright.html
著作権法
http://kaga.law.osaka-u.ac.jp:80/~kagayama/HowtoHTML/OnHomepageJ.html
大阪大学法学部加賀山、専門家の立場からのＷＷＷと著作権の話

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

■日本語・日本文化学類２班の学生のホーム・ページ一覧

[10月7日] [10月24日] [HTML] [HTMLタグ参照]

Last updated: 1996/10/24 16:46:22

Yasushi Shinjo / <yas@is.tsukuba.ac.jp>