HTML による WWW ページの作成

					2014年05月16日
情報科学類 コンピュータリテラシ

                                       筑波大学 システム情報系 情報工学域
                                       新城 靖
                                       <yas@cs.tsukuba.ac.jp>

このページは、次の URL にあります。
http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2014/2014-05-16
あるいは、次のページから手繰っていくこともできます。
http://www.coins.tsukuba.ac.jp/~yas/
http://www.cs.tsukuba.ac.jp/~yas/

■連絡事項

Unix Super Text 上巻「第28章 World Wide Web」参照。
次回 5月20日火曜日は、講義室 3A312 に集合。

■ハイパーテキスト・ハイパーメディアと World Wide Web

ハイパーテキスト(hypertext)とは、内部に他のテキストへの「参照 (reference)」が埋め込まれているテキスト（文書、文字だけから構成されるデータ）である。ハイパーテキストという仕組みを使えば、テキストのある部分から、関連している情報を含んでいるテキストのある部分を引き出すことが簡単になる。

ハイパーテキストを拡張し、テキスト・データだけでなく、音声や画像などのデータを扱えるようにしたものを、ハイパーメディア(hypermedia)という。 World Wide Web は、ハイパーメディアに基づいて作られている情報提示のための仕組みである。

インターネットの雲、資源、リンク、ブラウザ

インターネット上の資源とハイパーメディア

ハイパーメディアやハイパーテキストのデータを作成するためには、次の２つの事が必要になる。

差されるデータに印(mark,label)を付ける。
差すデータに、参照を埋め込む。

文書（テキスト）に、「ここは表題」、「ここは箇条書」といった、文書の構造を示す目印（マーク）を付けることをを付けることを、マークアップするという。ハイパーメディアを記述するためには、上の２つのことを支援した、人工の言語を使う。このような言語を、マークアップ言語(markup language)という。

WWW では、マークアップ言語として HTML (HyperText Markup Language)と呼ばれている言語が使われている。

◆URL

HTML では、他のデータへの参照を実現するためにURL (Uniform Resource Locator) という形式を使う。次に、URL の例を示す。

http://www.tsukuba.ac.jp/education/college.html

http: HyperText Transfer Protocol。WWWのデータを保持しているプログラムと、WWWを表示するプログラムの間でデータをやり取りするときの形式を定めた約束。
www.tsukuba.ac.jp: そのデータを持っているコンピュータの名前。
/education/college.html: そのコンピュータの中での資源の名前（ファイルの名前）。最後の .html は、その資源がHTML で書かれている事を表わしている。

◆HTMLでの表示

WWW ブラウザは、整形された HTML ではなく、整形前の元の HTML (source) を表示する機能がある。

◆絶対形式と相対形式

URL には、絶対形式と相対形式がある。 絶対形式(absolute form) とは、にhttp:,host,dir/filename がそろっているものである。 相対形式(relative form) とは、このうち http: や host が省略されたものである。絶対形式と相対形式は、それぞれ、完全形と短縮形と呼ばれることもある。

例

ある HTML で記述されたデータの URL:

http://host1:port1/dir1/file1.html

データの中の相対形式の URL:

file2.html

絶対形式での意味:

http://host1:port1/dir1/file2.html

◆ホーム・ページ

WWWで ホーム・ページ(home page) とは、本来は、ある一連の情報にアクセスするために、最初にアクセスされることが想定されて作られているページを意味する。

「本来は」、ホーム・ページではない WWW ページも存在する。現実には、「ホーム・ページ==WWWページ」という使い方をする人が多い。情報科学類生は、この２つを区別したい。この講義のページでは、区別している。

「ホームページ」さまざまな用例集 ver. 2005.9.2 by Kuno。ネットワーク・ニュース fj.net.words に時々投稿される。

■HTML

HTML(the HyperText Markup Language) は、WWW で ハイパーメディア データを定義するための マークアップ言語。 HTML は、「本来は」、文書の構造を記述する。

HTML で記述できる文書の構造:

ヘッダ（文書の題目）
見出し、章立ての木構造
段落
箇条書
表

HTML では、文書の構造を記述することができるが、「表示の方法」を記述することは、本来はでない。

表示の方法:

文字フォントの種類、大きさ、色
行間
左詰め、中央寄せ、右詰め
肩付き、下付き

ワードプロセッサ(Word processor, ワープロ)は、紙に印刷した時の、このような表示の方法を設定するためのプログラムである。これに対して、HTML では、もともとの思想では、少数の物理スタイルタグという例外を除いて、表示の方法は、それを表示するプログラム（ブラウザ）が決める。

しかし、現実には、もともと例外だった物理スタイルタグを、ブラウザ・メーカが勝手に拡張・追加するという状況に陥った。この状況を打破するために、 HTML (HTML 4.0) では、「スタイルシート」という考え方の導入した。

スタイルシートとは、表示の方法（スタイル）に名前を付けて、ドキュメント単位やパラグラフ単位でどのスタイルを使うかを指定できるようにしたもの。新しいタグを追加することなく、表示の方法を記述することができる。 HTML 4.0 では、物理スタイルタグが、「もう古い(deprecated)」、あるいは、「使わないことを勧める(discouraged)」とされた。

WWWページを作る目的は、多くの人にメッセージを伝えることである。そういう意味では、特定のブラウザでしか使えないような機能は、使わないようにするべきである。表示の方法よりも内容が大事。

◆HTMLの文法とタグ

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

HTMLのタグの形式:

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

タグには 開始タグ (/がついていない)と 終了タグ (/がついている)がある。

開始タグと終了タグの間にタグ付けの対象となるテキストが書かれる。

基本的に開始タグは、見出し、箇条書などの機能を「オン」にし、終了タグは機能を「オフ」にする働きがある。ただし、<IMG> のように組になっていないタグもある。

TAGNAMEには、アルファベット（大文字でも小文字でもよい）と数字が使われる。

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

<TAGNAME ATTR1=VALUE1 ATTR2=VALUE2>タグの対象テキスト</TAGNAME>

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

◆HTML文書の構造

HTMLの文書の大まかな構造

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

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

<HTML>で始まり </HTML>で終る。おおきく２つの部分、 <HEAD>,</HEAD> で囲まれた ヘッダ(header) と、<BODY>,</BODY> で囲まれた 本体(body) から構成される。ヘッダの <TITLE>,</TITLE>で囲まれた部分は、 タイトル で、タイトルバーなどに表示される。ヘッダでは、見出し、文字飾り、ハイパーリンクを使うことができない。

◆見出し（heading）

HTMLで記述された文書の本体の構造

<H1>第１章</H1>
        １章の冒頭
        <H2>第１節</H2>
        １章１節の冒頭
                <H3>第１項</H3>
                １章１節１項のパラグラフの並び
                <H3>第２項</H3>
                １章１節２項のパラグラフの並び
        <H2>第２節</H2>
        １章２節の冒頭
                <H3>第１項</H3>
                １章２節１項のパラグラフの並び
        <H2>第３節</H2>
        １章３節の冒頭
                <H3>第１項</H3>
                １章３節１項のパラグラフの並び
<H1>第２章</H1>

HTML の文書は、 見出し(heading) と パラグラフ(paragraph) ( 段落 ) の並びから構成されている。 HTML では、見出しとして <H1> から <H6> までが定義されいる。見出しを使うことで、章の構成を表現することができる。

段付け(indentation) ( 字下げ ) は、説明のために付けたものである。HTMLでは、空白やタブは、単語の区切りとして扱われるため、空白やタブによる段付けは無視される。つまり、書き手が自由に読みやすいように段付けをしてよい。

<H1> から <H3> までの見出しは、 Firefox などのブラウザでは、標準で普通の文字より大きな文字で表示さる。しかし、大きな文字で表示させたるために、見出しの機能を使うのは、本来は、誤りである。見出しがどのように表示されるかは、ブラウザの種類や設定に依存している。見出しは、あくまでも章の構成を表わす目的で使う。

◆パラグラフ

見出しと見出しの間には、いくつかのパラグラフを記述する。パラグラフは、 <P>で始まり、</P>で終わる。ただし、終りの </P>は、HTML ではオプション（付けても付けなくてもよい）なので、書かない人も多い。

◆リスト（箇条書）

HTML で リスト(list,並び) とは、 箇条書(item) を作るための機能である。

HTML で扱える箇条書の種類:

UL (Unordered List) 番号無しリスト
OL (Orderd List) 番号付きリスト
DL (Definition List) 定義リスト

例:

HTML記述：

<UL>
<LI>日本料理
<LI>中華料理
<LI>韓国料理
<LI>フランス料理
<LI>イタリア料理
</UL>

表示例：

日本料理
中華料理
韓国料理
フランス料理
イタリア料理

HTML記述：

<OL>
<LI>メールリーダを実行する
<LI>新着メールを取り込む
<LI>新しいメールを書く
<LI>新しいメールを送る
<LI>メールリーダを終了する
</OL>

表示例：

メールリーダを実行する
新着メールを取り込む
新しいメールを書く
新しいメールを送る
メールリーダを終了する

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

HTML記述：

料理
<UL>
<LI>日本料理
<UL>
    <LI> すし
    <LI> さしみ
    <LI> そば
    <LI> 天ぷら
    </UL>
<LI>韓国料理
    <UL>
    <LI> 海鮮ナベ
    <LI> 焼肉
    <LI> ジャプチェ
    </UL>
</UL>

表示例：

料理

日本料理
- すし
- さしみ
- そば
- 天ぷら
韓国料理
- 海鮮ナベ
- 焼肉
- ジャプチェ

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

HTML で、<A>と</A> で囲まれている部分を、 アンカ(anchor) とう。

船の錨（いかり）の矢印を連想

アンカは、ハイパーリンクの始点と終点を表現している。ハイパーリンクの始点は、リンクの頭(head)、終点は、リンクの尾(tail)ともいうこともある。 HTMLの解説書の中には、始点をリンク、終点をアンカと呼んでいるものもある。

例: HTML記述：

<A HREF="http://www.tsukuba.ac.jp/index.html">Univ. of Tsukuba </A>

表示例：

Univ. of Tsukuba

「Univ. of Tsukuba」というテキストが、ハイパーリンクの始点で、 http://www.tsukuba.ac.jp/index.htmlで表わされた資源(ファイル) が終点。終点、<A>タグ中のHREF (Hyper REFerence) という属性によって指定される。

リンクの URL は、相対形式でもよい。

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

「[English]」というテキストが、ハイパーリンクの始点。この記述が　URL http://www.tsukuba.ac.jp/dir/index.htmlの中で使われたとすると、"english.html" という相対形式の URL は、絶対形式では http://www.tsukuba.ac.jp/dir/english.htmlとなる。

ハイパーリンクの終点は、同じファイル内、あるいは、別のファイルにあるテキストのある一部分を差し示すこともできる。そのためには、id属性 (identifier 属性)付のアンカと 断片識別子(破片識別子、fragment identifier) を使う。

<H2 id="boston">Boston<H2>

ハイパーリンクの終点は、普通、見出しが使われるが、見出しでなくてもよい。 <H2>タグのid属性の値 "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" というファイルの中にある <TAGNAME id="boston"></TAGNAME>で作られたアンカへのハイパーリンク。

◆イメージへのリンクとインライン・イメージ

WWW でイメージを扱う方法

ハイパーリンクの先にイメージ・データを置く。 <A HREF="file.png"> のように、HREF 属性としてイメージ・データの URL を指定する。
インライン・イメージ。テキストの途中に表示されるイメージである。

記述例:

<IMG SRC="images/client-server-service.png"
     ALT="サーバがサービスをクライアントに提供している。">

表示例

タグ <IMG> がインライン・イメージを張り付けるという意味である。<IMG> には、終了のタグ </IMG> はない。

SRC属性では、テキストの途中で展開して表示するイメージの URL を指定する。

ALT属性は、イメージの代わりに表示されるテキストを指定する。これは、Firefox などのブラウザのオプションとして、「画像の読み込み(Load Images)」がオフになっている時にイメージに代わって表示れる。 ALT属性は、w3m や lynx などのように、イメージが表示できないブラウザにより使われたり、目の不自由な人がイメージの内容を知る時に使われる。

IMGタグのSRC属性では、絶対形式のURL使うこともでる。

<IMG SRC="http://www.tsukuba.ac.jp/icons/penguin.png" ALT="[ペンギンのアイコン]">

インライン・イメージとしてよく使われる画像の形式

PNG (Portable Network Graphics): 普通の圧縮方法(可逆圧縮方法)を使っている。普通の圧縮方法(可逆圧縮方法)を使っている。コンピュータで作成したアイコンや図形、いわいる「アニメのセルのようなベタぬり」に適している。１ピクセルは、赤、緑、青でそれぞれ16ビット、全体で48ビット(2⁴⁸ == 281474976710656色)まで。
GIF (CompuServe Graphic Image Format)形式(ジフ)(.gif): 256色まで。圧縮アルゴリズムとして、LZ77 という方法が使われており、一部の国で特許が有効なためライセンス料が必要になる。アメリカや日本では特許は特許は切れている。
JPEG (Joint Photographic Experts Group) 形式(ジェイペグ)(.jpeg,.jpg): 劣化式圧縮方法を使っている。イメージ・スキャナやディジタル・カメラで取り込んだ写真に適している。約1670万色(2²⁴)まで。

◆アドレス

HTML文書の最後には、普通、 <ADDRESS>,</ADDRESS>タグを使って、その文書の著者の電子メール・アドレスや著者のホーム・ページへのリンクを書く。これは、このページの内容にきちんと責任を持つことを示している。

HTML記述：

<ADDRESS>
who at coins.tsukuba.ac.jp
</ADDRESS>

表示例：

who at coins.tsukuba.ac.jp

「who at coins.tsukuba.ac.jp」という表記は、「who@coins.tsukuba.ac.jp」の意味で、 spam対策の一種。spamを送信する人は、Web ページに含まれている電子メールのアドレスを収集することがある。電子メールのアドレスを、自動収集プログラムには分からないが人間には分かるようにするために変形する。変形の方法は、いろいろ工夫している人がいる。

◆文字飾り

文書内の単語を太字にしたり斜体にしたりする機能を文字飾りとう。

文字飾りで使う２種類のタグ

論理スタイルタグ: 「強調 <EM> <STRONG>」、「定義 DFN」、「引用 CITE」、「コード(コンピュータ) <CODE>」、「変数 <VAR>」、「キーボード (KBD」など、文書の論理的な構造を表わす。表示されるかは、ブラウザに任される。
物理スタイルタグ: 「太字 <B>」、「イタリック <I>」、「タイプライタ・フォント <TT>」、「フォント指定 <FONT> <BIG> <SMALL> <BASEFONT>」とった具体的な表示方法を表わす。

「肩付き <SUP>」と「下付 <SUB>」は、論理的に使うならば、論理スタイルタグに入れてもよい。

◆整形済みテキスト

整形済みテキストとは、文字端末(iTerm や sshでログインした時)に表示されたコンピュータの出力である。たとえば、「コマンドプロンプト」やシェルとの対話の画面の様子をHTMLの文書に張り付る時に使う。 <PRE></PRE> で該当部分を囲んだ中では、空白やタブや改行がそのまま有効になる。

HTML記述：

<PRE>
      May 2014
Su Mo Tu We Th Fr Sa
             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 31
</PRE>
      May 2014
Su Mo Tu We Th Fr Sa
             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 31

表示例：

      May 2014
Su Mo Tu We Th Fr Sa
             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 31

May 2014 Su Mo Tu We Th Fr Sa 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 31

◆HTMLで使えない文字

次の３つの文字は、HTML の中では特別の意味を持つ。

これらの文字を画面に表示させたい時には、次のように記述する。

表示 HTML中の記述元の英単語

< < less-than

> > greater-than

& & ampersand

注意: <PRE></PRE>の中でも、「<」,「>」, 「&」という文字は、解釈される。

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

◆デバッグ

コンピュータのプログラムに含まれている誤りをバグ(bug、虫)という。バグを取ることをデバッグという。

デバッグ中のものは、サーバに置く必要はない。 HTML で何か書いたページは、サーバに置かなくてもWWW ブラウザで直接開いて見ることができる。 ファイル(File)メニューで ブラウザでファイルを開く(Open file) を選ぶ。ファイルを書き換えたら、エディタで保存して、再読込(Reload) ボタンを押す。

書いた文書が画面に現われない時には、<タグ>の「>」を書き忘れていないかをチェックする。漢字の「＞」ではなく、 ASCII ( 英字、直接入力 ) の「> 」である。

終了タグをよく書き忘れる。 </H1> </H2> </H3> を下記忘れると、ブラウザに画面に大きな字が並ぶ。 </UL> </OL> </DL> を書き下記忘れると、その場所で段づけがおかしくなる。

インライン・イメージがうまく表示できない時には、 <IMG>の SRC属性で指定しているファイル名をチェックする。

同様にリンクがうまく開かない時には、<A>の HREF属性を調べる。既存のページを差す時には、まず WWW ブラウザで表示して、そこに現われたものをコピー＆ペースト(Copy and Paste) でエディタにもってくる。

◆サンプルの利用

WWW ページを作る時には、0 から HTML によりファイルを作成することもできるが、気に入ったページを真似して書くことからはじめることもできる。ただし、著作権には注意する。

コンピュータリテラシの授業で利用できるサンプルを用意している。練習問題参照。

◆ページの内容

WWWページに期待される内容

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

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

自分の名前(漢字がある人は漢字、読み方（平仮名かローマ字）)
電子メール・アドレス
写真
関連情報へのリンク

ページの末尾に付ける電子メール・アドレスは、重要である。

WWWページに含めないほうがよい情報

自宅の住所、生年月日、電話番号。
法律(特に著作権法)を犯しているもの。
他人の名誉・プライバシを侵害しているもの。

◆漢字コード

漢字コードについては、選択可能なら、電子メールと同じく JIS にするとよい。 EUC と Shift-JIS では、Web ブラウザによる漢字コードの自動判定に失敗することがある。

Web ブラウザの自動判定に頼らず、 HTML の <HEAD></HEAD> の中に、 <META>タグを使って漢字コードを明示的に示す方法もある。

JIS

<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=iso-2022-jp">
</HEAD>

EUC (日本語)

<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=EUC-JP">
</HEAD>

Shift JIS

<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=Shift_JIS">
</HEAD>

UTF-8

<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=UTF-8">
</HEAD>

ワードプロセッサによるテキストでの出力、MacOSX やWindows のテキスト・エディタの多くは、Shift JIS を出力することが多い。

■HTML簡易リファレンス・マニュアル

■実習

実習時間中には、以下の課題をできるだけ多く行いなさい。全部を行う必要はない。

★練習問題(901) WebブラウザーでのHTMLの観察

この課題の前に、マウスの設定がなされており、「副ボタン」が設定されていることを確認しなさい。

Firefoxブラウザを操作して、元の HTML (ソース)を表示しなさい。

HTML を表示したいページを Firefox で普通に表示する
表示されたページで、何も表示されていない部分（白い部分）にマウスのポインタを移動して、マウスの主ボタン（左ボタン）でクリックする。(何か選択している状態だったらこれで解除される。)
マウスの副ボタン（右ボタン）でコンテキスト・メニューを表示する。 Mac では、マウスの右ボタンの代わりに、コントロール・キーを押しながらボタンを押すことでもよい。
コンテキスト・メニューから「ページのソースを表示」を選ぶ。

コンテキスト・メニューを使うかわりに、「Command+u」 ( Command

+u)を押す方法もある。

(クリックで拡大)

★練習問題(902) 画像の読み込み

Firefox, Safari などのブラウザで、画像の読み込み機能をオンにしたりオフにしたりして、Web ページを表示しなさい。

Firefox

「Firefox」メニューから「環境設定」を選ぶ
「コンテンツ」タブを選ぶ
「画像を自動的に読み込む」のチェックを入れる／外す

Safari

「Safari」メニューから「環境設定」を選ぶ
「表示」タブを選ぶ
「ページを開く時に画像を表示」のチェックを入れる／外す

★練習問題(903) MacOSX 「デフォルトWebブラウザ」

MacOSX では、次のような場合に「デフォルトWebブラウザ」として登録されているWebブラウザが実行される。

拡張子が .html のファイルをダブルクリックや open コマンドで開く。
アプリケーション等で、「http://」で始まる URL 認識して、ファイルを開く。

$ open http://www.coins.tsukuba.ac.jp/ 
$ open file1.html

この結果、「デフォルトWebブラウザ」として登録されているブラウザが実行され、その URL で示されたWeb ページやファイルが表示される。この機能を確認しなさい。

★練習問題(904) MacOSX 「デフォルトWebブラウザ」の設定

Safari.app を使えば、「デフォルトWebブラウザ」を好みのものに変更することができる。この機能を確認しなさい。

「アプリケーション」ディレクトリにある Safari.app を実行する。(open /Applications/Safari.app)
「Safari」メニューから「環境設定」を選ぶ
「一般」タブを選ぶ
「デフォルトWebブラウザ：」のメニューに表示されるものから好きなものを選ぶ。表示されなければ、一番下の「選択」で開いて選択する。

★練習問題(905) WWWページ用のディレクトリ作成

筑波大学情報学類コンピューティング環境では、個人の WWW ページは、次のような URL で参照される。

http://www.coins.tsukuba.ac.jp/~ユーザ名/

「ユーザ名」を、ログインの時に打つ自分のユーザ名で置き換えなさい。この URL は、次のディレクトリに対応する。

~/public_html/htdocs

このディレクトリを、mkdir コマンドで作成しなさい。

$ mkdir ~/public_html 
$ mkdir ~/public_html/htdocs

作成したディレクトリのその他(others)に対するアクセス許可で x ビットが立っていることを確認しなさい。

$ ls -ld ~/public_html 
drwxr-xr-x  5 yas  prof  4096  4 10 13:46 /home/prof/yas/public_html
$ ls -ld ~/public_html/htdocs 
drwxr-xr-x  35 yas  prof  5120  4 10 13:49 /home/prof/yas/public_html/htdocs
         ^ここ

さらに、ホーム・ディレクトリにもその他(others)に対するアクセス許可で x ビットが立っていることを確認しなさい。

$ ls -ld ~ 
drwxr-xr-x  53 yas  prof  7168  5 15 15:25 /home/prof/yas
$ 
         ^ここ

x ビットがたっていない場合には、その効果を理解し、 TA に相談して chmodコマンドで変更しなさい。 手引き 2.6.7項参照。 The Unix Super Text 9.6.1項、23章参照。

ディレクトリを作成してもディレクトリが空の時に、 Web ブラウザで http://www.coins.tsukuba.ac.jp/~ユーザ名/ を開くと次のようなエラーが表示される。

Forbidden

You don't have permission to access /~ユーザ名/ on this server.

これは、意図された動作である。

★練習問題(906) 単純なテキスト・ファイルの公開

注意：この練習問題は、練習問題 (905)WWW ページ用のディレクトリ作成の後に行いなさい。

ディレクトリ ~/public_html/ の下に、単純なテキスト・ファイル (HTMLではない)を Emacs 等で作成して置きなさい。ファイル名の拡張子は、「.text」または「.txt」としなさい。

作成したファイルのモードを調べなさい。file1.textという名前のテキスト・ファイルを作成した場合、次のようにその他(others)に対するアクセス許可で r ビットが立っていることを確認しなさい。

$ cd ~/public_html/htdocs 
$ emacs file1.text 
$ ls -l file1.text 
-rw-r--r--   1 yas  prof  2 May 22 22:09 file1.text
$ 
       ^ここ

作成したファイルを Web ブラウザで表示しなさい。たとえば、 file1.textという名前のテキスト・ファイルを作成した場合、次のような URL で参照する。

http://www.coins.tsukuba.ac.jp/~ユーザ名/file1.text

ユーザ名を、ログインの時に打つ自分のユーザ名で置き換えなさい。HTTP で始まる URL には、public_html は含まれないことに注意しなさい。

★練習問題(907) サンプルのコピー

注意：この練習問題は、練習問題 (905)WWW ページ用のディレクトリ作成の後に行いなさい。

次の HTML ファイルを、ディレクトリ ~/public_html/ の下にコピーし、それを Web ブラウザ表示しなさい。

~yas/public_html/htdocs/coins/literacy-2014/samples/sample1.html

$ cd ~/public_html/htdocs 
$ cp ~yas/public_html/htdocs/coins/literacy-2014/samples/sample1.html .

注意: 最後のカレント・ワーキング・ディレクトリの意味の「.」を忘れないこと。

コピーした後、Web ブラウザで次の URL を開きなさい。

http://www.coins.tsukuba.ac.jp/~ユーザ名/sample1.html

ユーザ名を、ログインの時に打つ自分のユーザ名で置き換えなさい。HTTP で始まる URL には、public_html は含まれないことに注意しなさい。

★練習問題(908) 個人のホーム・ページの作成

個人のホーム・ページを作成しなさい)。各自のホーム・ページは、次の HTML ファイルに対応する。

~/public_html/htdocs/index.html

作成したホーム・ページを、Web ブラウザで開きなさい。 Web ブラウザで次の URL を開きなさい。

http://www.coins.tsukuba.ac.jp/~ユーザ名/index.html
http://www.coins.tsukuba.ac.jp/~ユーザ名/

★練習問題(909) ディレクトリを指定した時のWebページの内容

URL でディレクトリを指定すると、自動的にそのディレクトリにある「index.html」という名前のファイルが使われる。この機能を使うと、各自のホーム・ページは、次のように短く表示できる。

http://www.coins.tsukuba.ac.jp/~ユーザ名/

この事を確認しなさい。また、ホーム・ページ以外のページについても、この機能が有効なことを確認しなさい。

★練習問題(910) Emacs HTMLモード

Emacs で拡張子が .html のファイルを開くと、「HTML モード」と呼ばれるモードになり、HTML の編集に有用な機能が働くようになる。次のようにして、どのような機能が利用可能か調べなさい。

C-x C-f 等で HTML ファイルを開く(新規作成含む)
次のキーを打つ
```
M-x describe-mode
```

この結果、ウインドウが開かれ、説明が表示される。説明を消すには、C-x 1 (Control+x の後に数字の1) と打つ。

★練習問題(911) Emacs font-lock-mode

font-lock-mode とは、編集しているテキストに含まれるキーワード等を強調して（色をつけて）表示するモードである。font-lock-mode は、マイナー・モードの一種で、HTMLモードやTextモード等のメジャーモードと一緒に使える。次のようにすると、font-lock-mode を on にしたり off にしたりできる。この機能を確認しなさい。

M-x font-lock-mode

★練習問題(912) FirefoxによるWebページの保存

Firefox で保存したい Web ページを表示しなさい。そして、その内容をファイル保存しなさい。

「ファイル」メニューから「別名でページを保存」を選ぶ

保存の方法には、次のような方法がある。

Web ページ,完全: HTML と中に含まれている画像を保存する
Web ページ,HTMLのみ: HTML だけを保存する。
テキストファイル: HTML の中からテキストだけを抜き出して保存する。空白で字下げなどを行う。

これらの違いを調べなさい。

★練習問題(914) wgetコマンド

wget は、引数として与えられたURLで指定された資源を取得し、ファイルに保存するコマンドである。コマンドラインから実行できる。次の例は、資源 http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2014/samples/sample1.html を取得し、ディレクトリ ~/dir 以下の sample1.html という名前のファイルに保存している。

$ cd ~/dir 
$ wget http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2014/samples/sample1.html

簡単な使い方は、次のようにすれば表示できる。

$ wget --help

または

$ wget --help | lv

wget コマンドは、標準出力に使い方を出力するこれを lv で表示するには、パイプ機能 | を用いる。

詳しくは、man wget を見なさい。

★練習問題(915) Web ブラウザ w3m

w3mは、 iTerm などの文字端末で動作する Web ブラウザである。 w3m を使ってみなさい。

$ w3m http://www.coins.tsukuba.ac.jp/ 
$ w3m ~/public_html/htdocs/index.html

次のように打つと、詳しい説明が表示される。

$ w3m --help 2>&1 | lv

w3mコマンドは、標準エラー出力に使い方を表示する。これを lv で表示するには、2>&1 | を用いる。

詳しくは、man w3m や次の Web ページを見なさい。 http://w3m.sourceforge.net/。 coins では、次のように man コマンドで英語のマニュアルを読みなさい。

$ LANG=C man w3m

★練習問題(916) Web ブラウザ lynx

iTerm などの文字端末で動作する Web ブラウザ lynx を使ってみなさい。

$ lynx -display_charset=utf-8  
$ lynx -display_charset=utf-8 ~/public_html/htdocs/index.html 
$ lynx -display_charset=utf-8 https://www.coins.tsukuba.ac.jp/

The Unix Super Text 28.3節参照。 http://lynx.isc.org/ 参照。

★練習問題(917) HTMLの検査

Another HTML-lint gateway (ミラーサイト) を使って、作成したページの検査を行いなさい。また、その解説を読みなさい。どの HTML の文法に従うのがよいかを考えなさい。厳密な HTML の文法に従うことの意義について考えなさい。

★練習問題(918) Firefoxの言語選択

Web ページの中には、1つの URL に対して複数の言語で資源が用意されていることがある。Firefox は、Web サーバに対して表示可能な言語を送信している。 Web サーバは、受け取った言語のリストの中から、資源を選択して返す。

Firefox の言語選択機能で、どの言語が選択されているか調べなさい。

「Firefox」メニューから「環境設定」を選ぶ。
「コンテンツ」タブを選ぶ。
「言語設定」ボタンを押す。

言語のリストを編集したり、言語の優先順位を変更することができる。

この機能を利用してみなさい。複数の言語で記述されているページを探して、表示が切り替わることを確認しなさい。

■課題9 HTML による WWW ページの作成

(1) HTML で次のような条件を満たす WWW ページを作成しなさい(注意: ホーム・ページでなくともよい)。

次のいずれかの内容を含む。全世界からアクセスされても問題ない内容である。
- 情報科学類に設置する個人のホームページとして相応しい内容
- 高校生向け筑波大学の紹介
- クラスメート向けの好きな {食べ物, 観光地, 人物, 音楽, キャラクタ, コンピュータ, ソフトウェア, Webサイト, その他} の紹介
全体で(タグを含めて) 20 行以上。
<HTML>、<HEAD>、<TITLE> <BODY>タグを含む。
自分の名前を含む。漢字の名前がある人は漢字と読み方（平仮名かローマ字）)を含む。
電子メールのアドレスを含む。 (spam対策を行ってもよい。)
見出しタグ(<H1>、<H2>、<H3>など) による見出しを 3 個以上含む。見出しは、木構造に基づいて、親子関係がある。見出しの内容とては適切なものである。（適切な見出しを付ける練習をすると良い。練習しないと上達しない。）
<P>タグによるパラグラフがある。
<A href="..."></A>によるハイパーリンクを 2 つ以上含む。
<IMG>タグによる画像を1つ以上含む。画像の形式は、PNG、または、JPEG。IMG タグには、ALT属性を付ける。
画像が表示されないブラウザで表示しても、すべてのハイパーリンクをたどることができる。
物理スタイルタグを 含まない。
他のタグで代替可能な <BR>タグを 含まない。
整形のための <PRE>タグを 含まない。

注意1: 作成した WWW ページの URL (http:// から始まるもの)をレポートに含めなさい。レポート提出後も WWW ページを修正しても良いが、採点が済むまでは、上の条件を満たし続けること。

注意2: 作成する WWW ページがホーム・ページならば、~/public_html/htdocs/index.htmlというファイルを用いても良い。ホーム・ページではないならば、 ~/public_html/htdocs/index.html とは別のファイル名を用いなさい。

(2) Web ページには、ある条件の本で他人の著作物を含めることができる。(1) で作成した WWW ページに、他人の著作物がある場合には、その出典をレポートに記述しなさい。また、その著作物を WWW ページに利用してもよいことを示す根拠を説明しなさい。他人の著作物を含めてはない場合には、「他人の著作物は含まれていない」とレポートに記述しなさい。

(3) (1) で作成した WWW ページがホーム・ページかどうか記述しなさい。ホーム・ページの場合、「ホーム・ページである」と記述しなさい。そうでない場合、「ホーム・ページではない」と記述しなさい。

(4) The Unix Super Text の次の部分を読みなさい。

上巻「9.5節　ファイルとディレクトリの属性」
上巻「9.6節　ファイルとディレクトリのモードの変更」
上巻「第23章アクセス制御」

そして、項目について調べて、簡単に説明しなさい。

ls -l の表示で3番目に表示されるもの
ls -l の表示のモードからファイルの型を除いた部分
chmod の ugoa
chmod の +-=
UNIXの内部で人間を表す整数
UNIXの内部で人間を表す文字列
ファイルの所有者
GID
id コマンド
ファイルのユーザIDとグループIDを調べる方法
あるプロセスが、ファイルや他のプロセスに対して許されている操作だけを実行させること
ファイルの「内容」に対するアクセス制御の段階数
ファイルの「属性」に対するアクセス制御の段階数
スーパーユーザ

(5) The Unix Super Text の次の部分を読みなさい。

上巻「第25.8 電子メールに関する基礎知識」
上巻「第25.9 電子メールに関する中級者向け知識」

そして、項目について調べて、簡単に説明しなさい。

Bcc: と Cc: の違い
挨拶が大事な理由
返事を出す習慣がある理由
spam メール
~/.forward に書くメールアドレスの意味
~/.forward に書く「\user-name」の意味
~/.forward の内容を設定した後に行うべきこと
~/.forward の内容を間違えた時に起きることの例

(6) [加点] ハイパーリンクで、破片識別子(fragment identifier) を利用したページを作成しなさい。 id属性で、HTML の内部にハイパーリンクの先となるマークをつけなさい。そして、 <A>のhref属性では、# を使って、id属性でマークした部分を指し示しなさい。

レポートには、ページ全体の URL と破片識別子で用いた id 属性の値を含めなさい。

(7) [加点] 次の課題を1つ以上行いなさい。

(7a) [加点] (1) のページが英語以外の言語の場合、英語、英語の場合、日本語で同一内容のページを作成しなさい。それらのページの間で相互にリンクを貼りなさい。

(7b) [加点] WWW サーバ Apache にはコンテントネゴシエーション機能の機能がある。この機能を使うと、同じ URL でも、ブラウザの設定により（異なる言語による）異なる内容のページが返される。この機能を用いた WWW ページを作成しなさい。また、Firefox やその他のブラウザの機能を用いて、そのことを確認しなさい。

Last updated: 2014/06/16 16:42:34

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