2010年05月18日 情報科学類 コンピュータリテラシ 筑波大学 システム情報工学研究科 コンピュータサイエンス専攻, 電子・情報工学系 新城 靖 <yas@is.tsukuba.ac.jp>
このページは、次の URL にあります。
http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2010/2010-05-18
あるいは、次のページから手繰っていくこともできます。
http://www.coins.tsukuba.ac.jp/~yas/
http://www.cs.tsukuba.ac.jp/~yas/
~/.forward
で使う、バックスラッシュ「\
」は、
ASCII
「5c(16進数)」である。「\」と表示されたり「¥」と表示されること
がある。「/」ではない。
日本語キーボードでは、「¥」と表示されている。
iTerm では、「¥」キーを押すと、 ASCII 「5c(16進数)」が入力される。iTerm の中で実行した Emacs でも、同様である。
Carbon Emacs (Dockから実行) では、 「¥」キーを押すと、 ASCII 「5c(16進数)」 ではなく、 Latin-1 「a5(16進数)」 が入力されることがある。これは、「ことえり」の設定による。設定を変更し て、バックスラッシュが入力されるようにすることを強く奨める。これにより、 コンピュータ・リテラシで扱う LaTeX の課題や、2学期の「プログラミング入 門」で行う C 言語のプログラミングが楽になる。
バックスラッシュ「\
」は、bash では、
メタ・キャラクタ であ
る。echo コマンド等に与える時には、エスケープすること。
$ echo \yas
yas
$ echo '\yas'
\yas
$
~/.forward は、Emacs で編集するのが一般的である。
ハイパーテキストを拡張し、テキスト・データだけでなく、音声や画像などの データを扱えるようにしたものを、ハイパーメディア(hypermedia)という。 World Wide Web は、ハイパーメディアに基づいて 作られている情報提示のための仕組みである。
ハイパーメディアやハイパーテキストのデータを作成するためには、次の2つ の事が必要になる。
WWW では、マークアップ言語として HTML (HyperText Markup Language)と呼 ばれている言語が使われている。
http://www.tsukuba.ac.jp/education/college.html
http
www.tsukuba.ac.jp
/education/college.html
.html
は、その資源がHTML で書かれている事を表わしている。
http で始まるものは、通信路は暗号化されていないので、 通信内容(URLの一部、キーボードで打ち込んだユーザ名やパスワード、 クレジットカード番号など)が盗まれることがある。
https を使っていても、通信相手が偽物の場合には、意味がない。通信相手が 本物かどうかを確かめる機能は、Web ブラウザに備わっている。Web ブラウザ は、通信相手が確認できない場合には、警告を発する。
WWW ブラウザは、整形された HTML ではなく、整形前の元の HTML (source) を表示する機能がある。
URL は、一般に、次のような形式をしている。
scheme:scheme-specific-part
scheme
とは、「データを取ってくるための仕組」である。
普通は、インターネットの通信プロトコル(
http
, ftp
, telnet
, gopher
, wais
など)が来ることが多いが、そうではない( file
,
mailto
)こともある。
scheme-specific-partは、各scheme
ごとに
形式が違う。インターネットで使われるものは、次のような//
から始まるものである。
//host/pathname
//user:password@host:port/pathname
user
password
host
port
scheme
で標準のものと違うときに指定
できる。
pathname
/
。
user
やpassword
を
指定する時には、@
が必要である。
いくつか、URL の例を示す。
http://host1.is.tsukuba.ac.jp/dir1/dir2/file1 host1 へ HTTP で接続し、/dir1/dir2/file1 を GET する。 http://host1.is.tsukuba.ac.jp:8080/dir1/dir2/file1 上とほぼ同じ。ポート番号として標準の 80 ではなく、指定された 8080 が使われる。 http://host1.is.tsukuba.ac.jp/path1?pattern 「?」に続けて、「pattern」を書く形式もある。多くの場合 「/path1」に対応したプログラムが実行され、「pattern」がその引数となる。 ftp://host1.is.tsukuba.ac.jp/dir1/file1 「host1.is.tsukuba.ac.jp」で指定されたホストに ftp で接続する。 ユーザ名は anonymous 。「dir1/file1」のファイルを get する。 mailto:who@is.tsukuba.ac.jp 電子メール・アドレス news:fj.comp.lang.c ネットワーク・ニュースのニュース・グループ news:<20100401.1111@is.tsukuba.ac.jp> ネットワーク・ニュースの1つの記事。コロン「:」以降は、 記事のメッセージ識別子。 nntp://host1.is.tsukuba.ac.jp/fj.comp.lang.c/100 ネットワーク・ニュースの1つの記事。//以下は、NNTPサーバのホスト名。 fj.comp.lang.c は、ニュース・グループの名前の例。最後の数字は、記事番号。 file://host1.is.tsukuba.ac.jp/dir1/file1 ドメイン名 host1.is.tsukuba.ac.jp を持つリモート・ホスト上の 「/dir1/file1」という名前のファイル。
http:,host,dir/filename
がそろっているものである。
相対形式(relative form)
とは、このうち http:
や host
が省略されたものである。
絶対形式と相対形式は、それぞれ、完全形と短縮形と呼ばれることもある。
例
ある HTML で記述されたデータの URL:
http://host1:port1/dir1/file1.html
file2.html
http://host1:port1/dir1/file2.html
WWWで ホーム・ページ(home page) とは、本来は、ある一連の情報にアクセスするために、最初にアクセスされる ことが想定されて作られているページを意味する。
「本来は」、ホーム・ページではない WWW ページも存在する。現実には、「ホー ム・ページ==WWWページ」という使い方をする人が多い。 情報科学類 生は、 この2つを区 別したい。この講義のページでは、区別している。
「ホームページ」さまざまな用例集 ver. 2005.9.2 by Kuno。 ネットワーク・ニュース fj.net.words に時々投稿される。
HTML(the HyperText Markup Language) は、WWW で ハイパーメディア データを定義するための マークアップ言語。 HTML は、「本来は」、文書の構造を記述する。
HTML で記述できる文書の構造:
表示の方法:
しかし、現実には、もともと例外だった物理スタイルタグを、ブラウザ・メー カが勝手に拡張・追加するという状況に陥った。この状況を打破するために、 HTML (HTML 4.0) では、「スタイルシート」という考え方の導入した。
スタイルシートとは、 表示の方法(スタイル)に名前を付けて、ドキュメント単位やパラグラフ単位で どのスタイルを使うかを指定できるようにしたもの。 新しいタグを追加することなく、表示の方法を記述することができる。 HTML 4.0 では、物理スタイルタグが、「もう古い(deprecated)」、あるいは、 「使わないことを勧める(discouraged)」とされた。
WWWページを作る目的は、多くの人にメッセージを伝えることである。そうい う意味では、特定のブラウザでしか使えないような機能は、使わないようにす るべきである。表示の方法よりも内容が大事。
HTML による文書は、「<>
」で括られたキーワード
(
タグ(tag)
)
が埋め込まれたテキスト・ファイルである。テキスト・ファイルとは、文字デー
タだけが並んでいるファイルで、
Emacs 等の
テキスト・エディタ
で修正できるものである。
HTMLのタグの形式:
<TAGNAME>タグの対象テキスト</TAGNAME>
タグには
開始タグ
(/
がついていない)と
終了タグ
(/
がついている)がある。
開始タグと終了タグの間にタグ付けの対象となるテキストが書かれる。
基本的に開始タグは、見出し、箇条書などの機能を「オン」にし、終了タグは
機能を「オフ」にする働きがある。ただし、<IMG>
の
ように組になっていないタグもある。
TAGNAME
には、アルファベット(大文字でも小文字でも
よい)と数字が使われる。
タグには、オプションを設定できるものがある。
<TAGNAME ATTR1=VALUE1 ATTR2=VALUE2>タグの対象テキスト</TAGNAME>
オプションは、開始タグの括弧「<>
」の中に、
「属性名=属性値
」の形式で記述される。
HTMLの文書の大まかな構造
<HTML> <HEAD> <TITLE> タイトル </TITLE> </HEAD> <BODY> 本体 </BODY> </HTML>
<HTML>
で始まり
</HTML>
で終る。
おおきく2つの部分、
<HEAD>
,</HEAD>
で囲まれた
ヘッダ(header)
と、<BODY>
,</BODY>
で囲ま
れた
本体(body)
から構成される。
ヘッダの
<TITLE>
,</TITLE>
で囲まれた部
分は、
タイトル
で、タイトルバーなどに表示される。
ヘッダでは、見出し、文字飾り、ハイパーリンクを使うことができない。
HTMLで記述された文書の本体の構造
<H1>第1章</H1> 1章の冒頭 <H2>第1節</H2> 1章1節の冒頭 <H3>第1項</H3> 1章1節1項のパラグラフの並び <H3>第2項</H3> 1章1節2項のパラグラフの並び <H2>第2節</H2> 1章2節の冒頭 <H3>第1項</H3> 1章2節1項のパラグラフの並び <H2>第3節</H2> 1章3節の冒頭 <H3>第1項</H3> 1章3節1項のパラグラフの並び <H1>第2章</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>表示例:
HTML記述:
コマンド <DL> <DT> mnews <DD> ネットワーク・ニュースと電子メールを読み書きするプログラム。 <DT> mule <DD> テキスト・エディタの1つ。 <DT> Firefox <DD> WWWブラウザ。 <DT> irc <DD> 文字による会議システム。 </DL>
表示例:
リストは、 入れ子構造(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
」というテキストが、ハイパー
リンクの始点で、
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
となる。
ハイパーリンクの終点は、同じファイル内、あるいは、別のファイルにあるテ キストのある一部分を差し示すこともできる。そのためには、NAME属性付のア ンカと 破片識別子(fragment identifier) を使う。
<H2><A NAME="boston">Boston</A><H2>
ハイパーリンクの終点は、普通、見出しが使われるが、見出しでなくてもよい。
<A>
タグの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>
で作られたアンカへのハイパー
リンク。
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="[ペンギンのアイコン]">
インライン・イメージとしてよく使われる画像の形式
.gif
)
.jpeg
,.jpg
)
HTML文書の最後には、普通、
<ADDRESS>
,</ADDRESS>
タグを使っ
て、その文書の著者の電子メール・アドレスや著者のホーム・ページへのリン
クを書く。これは、このページの内容にきちんと責任を持つことを示している。
HTML記述:
<ADDRESS> who at coins.tsukuba.ac.jp </ADDRESS>表示例:
文書内の単語を太字にしたり斜体にしたりする機能を文字飾りとう。
文字飾りで使う2種類のタグ
整形済みテキストとは、文字端末(telnet や kterm)に表示されたコンピュー
タの出力である。たとえば、
「コマンドプロンプト」やシェルとの対話の画面の様子をHTMLの文書に張り付
る時に使う。
<PRE>
</PRE>
で該当部分を囲ん
だ中では、空白やタブや改行がそのまま有効になる。
HTML記述:
<PRE> May 2010 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 2010 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 2010 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 31May 2010 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></PRE>
タグを使う方法
もある。
次の3つの文字は、HTML の中では特別の意味を持つ。
<
>
&
表示 | HTML中の記述 | 元の英単語 |
---|---|---|
< | < | less-than |
> | > | greater-than |
& | & | ampersand |
<PRE>
</PRE>
の中でも、
「<
」,「>
」,
「&
」という文字は、解釈される。
コンピュータのプログラムに含まれている誤りをバグ(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ページに期待される内容
個人のWWWページの場合には、次のような内容のものが期待される。
ページの末尾に付ける電子メール・アドレスは、重要である。
WWWページに含めないほうがよい情報
1ページの長さには、注意する。WWWのページとしては、適切な長さがある。 長すぎると、遅い回線からアクセスしている人には、応答が悪くる。細かいペー ジに分割しすぎた場合、ページを手繰る操作がわずらわしくなる。
インライン・イメージの大きさや1つのページに張り付ける数にも注意する。
lynx などのように、イメージが表示できないブラウザを使う人や目の不自
由な人のためにも、インライン・イメージがなくても分かるようなページを作
るとよい。少なくとも、インライン・イメージをクリックしなくても先に進め
るようにし、<IMG>
タグには、必ずALT 属性を付ける。
さらに、テキストだけのページを用意すると完璧である。
どんな画面の大きさのブラウザで表示しても大丈夫なページを作るようにする。 文字の大きさを変えている人もいれば、小さな画面で見ている人もいる。
漢字コード については、選択可能なら、電子メールと同じく JIS にするとよい。 EUC と Shift-JIS では、Web ブラウザによる漢字コードの 自動判定に失敗することがある。
Web ブラウザの自動判定に頼らず、 HTML の <HEAD></HEAD> の中に、 <META>タグを使って漢字コードを明示的に示す方法もある。
<HEAD> <META HTTP-EQUIV="content-type" CONTENT="text/html;charset=iso-2022-jp"> </HEAD>
<HEAD> <META HTTP-EQUIV="content-type" CONTENT="text/html;charset=EUC-JP"> </HEAD>
<HEAD> <META HTTP-EQUIV="content-type" CONTENT="text/html;charset=Shift_JIS"> </HEAD>
ワードプロセッサによるテキストでの出力、MacOSX やWindows のテキスト・エ ディタの多くは、Shift JIS を出力することが多い。
C-x C-f
find-file
C-x C-s
save-buffer
C-x C-c
save-buffers-kill-emacs (終了)
C-x C-f
find-file
C-x C-w
write-file
C-x C-s
save-buffer
C-x C-c
save-buffers-kill-emacs (終了)
C-x C-w
で書き込むこと
を奨める。さもないと元のファイルを壊してしまうことになる。
類似のことは、cp コマンド等で元のファイルを別のファイルにコピーしてから、 別のファイルを Emacs で修正してもできる。
実習時間中には、 以下の課題をできるだけ多く行いなさい。全部を行う必要はない。
方法1: 引数にファイル名を与える方法。
C-x C-s
で保存
C-x C-c
で終了
C-x C-f
で、編集したいファイルを選ぶ。
存在しないファイルを選べば、新規作成として扱われる。
C-x C-s
で保存
C-x C-c
で終了
C-x C-f
で、元のファイルを選ぶ。
C-x C-w
で、別の(新しい)ファイルを選ぶ。
存在しないファイルを選べば、新規作成として扱われる。
C-x C-s
で保存
C-x C-c
で終了
Firefoxブラウザを操作して、元の HTML (ソース)を表示させなさい。
Firefox, Safari などのブラウザで、画像の読み込み機能をオンにしたりオフ にしたりして、Web ページを表示しなさい。
Firefox
.html
のファイルをダブルクリックや open コマンドで
開く。
http://
」 で始まる URL 認識して、ファイルを開く。
$ open http://www.coins.tsukuba.ac.jp/
$ open file1.html
この結果、「デフォルトWebブラウザ」として登録されているブラウザが実行さ
れ、その URL で示されたWeb ページやファイルが表示される。この機能を確認
しなさい。
Safari.app を使えば、「デフォルトWebブラウザ」を好みのものに変更するこ とができる。この機能を確認しなさい。
筑波大学情報学類コンピューティング環境では、個人の WWW ページは、次のよ うな URL で参照される。
http://www.coins.tsukuba.ac.jp/~ユーザ名/
ユーザ名
を、ログインの時に打つ自分のユーザ名で置き換え
なさい。
この URL は、次のディレクトリに対応する。
~/public_html
$ mkdir ~/public_html
作成したディレクトリのその他(others)に対するアクセス許可で x ビットが立っ
ていることを確認しなさい。
$ ls -ld ~/public_html
drwxr-xr-x 55 yas prof 1870 May 1 22:43 /home/prof/yas/public_html
$
^ここ
さらに、ホーム・ディレクトリにもその他(others)に対するアクセス許可で x
ビットが立っていることを確認しなさい。
$ ls -ld ~
drwxr-xr-x 82 yas prof 2788 May 22 17:35 /home/prof/yas
$
^ここ
x ビットがたっていない場合には、その効果を理解し、 chmodコマンド で変更しなさい。
ディレクトリを作成してもディレクトリが空の時に、
Web ブラウザで
http://www.coins.tsukuba.ac.jp/~ユーザ名/
を開くと次のようなエラーが表示される。
You don't have permission to access /~ユーザ名/ on this server.
注意:この練習問題は、練習問題 (1008)WWW ページ用のディレクトリ作成の後に行いなさい。
ディレクトリ ~/public_html/
の下に、単純なテキスト・ファイル
(HTMLではない)を Emacs 等で作成して置きなさい。ファイル名の拡張子は、
「.text
」または「.txt
」としなさい。
作成したファイルのモードを調べなさい。file1.text
という
名前のテキスト・ファイルを作成した場合、次のようにその他(others)に対す
るアクセス許可で r ビットが立っていることを確認しなさい。
$ cd ~/public_html
$ ls -l file1.text
-rw-r--r-- 1 yas prof 2 May 22 22:09 file1.txt
$
^ここ
作成したファイルを Web ブラウザで表示しなさい。たとえば、
file1.text
という名前のテキスト・ファイルを作成した場合、
次のような URL で参照する。
http://www.coins.tsukuba.ac.jp/~ユーザ名/file1.text
ユーザ名
を、ログインの時に打つ自分のユーザ名で置き換え
なさい。HTTP で始まる URL には、public_html
は含まれないことに注
意しなさい。
注意:この練習問題は、練習問題 (1008)WWW ページ用のディレクトリ作成の後に行いなさい。
次の HTML ファイルを、ディレクトリ ~/public_html/
の下にコピー
し、それを Web ブラウザ表示しなさい。
~yas/public_html/coins/literacy-2010/samples/sample1.html
$ cd ~/public_html
$ cp ~yas/public_html/coins/literacy-2010/samples/sample1.html .
注意: 最後のカレント・ワーキング・ディレクトリの意味の「.」を
忘れないこと。
コピーした後、Web ブラウザで次の URL を開きなさい。
http://www.coins.tsukuba.ac.jp/~ユーザ名/sample1.html
ユーザ名
を、ログインの時に打つ自分のユーザ名で置き換え
なさい。HTTP で始まる URL には、public_html
は含まれないことに注
意しなさい。
個人のホーム・ページを作成しなさい)。 各自のホーム・ページは、次の HTML ファイルに対応する。
~/public_html/index.html
http://www.coins.tsukuba.ac.jp/~ユーザ名/index.html
URL でディレクトリを指定すると、自動的にそのディレクトリにある 「index.html」という名前のファイルが使われる。この機能を使うと、 各自のホーム・ページは、次のように短く表示できる。
http://www.coins.tsukuba.ac.jp/~ユーザ名/
Emacs で拡張子が .html のファイルを開くと、「HTML モード」と呼ばれるモー ドになり、HTML の編集に有用な機能が働くようになる。次のようにして、どの ような機能が利用可能か調べなさい。
C-x C-f
等で HTML ファイルを開く(新規作成含む)
M-x describe-mode
C-x 1
(Control+x の後に数字の1) と打つ。
M-x font-lock-mode
WWW ページとして公開するファイルのモードはその他(others)に対するアクセ ス許可で r ビットが立っている必要がある。もし、このビットを chmod o-r で落した場合、Web ブラウザでアクセスできなくなる。このことを確かめなさ い。
$ ls -l sample1.html
-rw-r--r-- 1 yas prof 408 5 18 11:11 sample1.html
<WWWブラウザでアクセス>
$ chmod o-r sample1.html
$ ls -l sample1.html
-rw-r----- 1 yas prof 408 5 18 11:11 sample1.html
<WWWブラウザでアクセス>
$ chmod o+r sample1.html
$ ls -l sample1.html
-rw-r--r-- 1 yas prof 408 5 18 11:11 sample1.html
<WWWブラウザでアクセス>
同様に、ディレクトリを作成し、その他(others)に対する x ビットを立てたり 落したりしながら、その効果を確認しなさい。
$ mkdir dir1
$ emacs dir1/file1.html
$ ls -ld dir1
$ ls -l dir1/file1.html
<WWWブラウザでアクセス>
$ chmod o-x dir1
$ ls -ld dir1
<WWWブラウザでアクセス>
Firefox で保存したい Web ページを表示しなさい。 そして、その内容をファイル保存しなさい。
wget は、引数として与えられたURLで指定された資源を取得し、ファイルに保
存するコマンドである。コマンドラインから実行できる。次の例は、資源
http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2010/samples/sample1.html
を取得し、ディレクトリ ~/dir 以下の sample1.html という名前のファイルに
保存している。
$ cd ~/dir
$ wget http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2010/samples/sample1.html
簡単な使い方は、次のようにすれば表示できる。
$ wget --help
または
$ wget --help | lv
wget コマンドは、標準出力に使い方を出力する
これを lv で表示するには、パイプ機能 |
を用いる。
詳しくは、man wget を見なさい。
w3mは、 iTerm などの文字端末で動作する Web ブラウザである。 w3m を使ってみなさい。
$ w3m -e http://www.coins.tsukuba.ac.jp/
$ w3m -e ~/public_html/index.html
-e オプションを使うと、端末の文字コードが EUC になる。
次のように打つと、詳しい説明が表示される。
$ w3m --help 2>&1 | lv
w3mコマンドは、標準エラー出力に使い方を表示する。
これを lv で表示するには、2>&1 |
を用いる。
詳しくは、man w3m や次の Web ページを見なさい。
http://w3m.sourceforge.net/
。
iTerm などの文字端末で動作する Web ブラウザ lynx を使ってみなさい。
$ lynx
$ lynx ~/public_html/index.html
The Unix Super Text 28.3節 参照。
Another HTML-lint gateway (ミラーサイト) を使って、作成したページの検査を行いなさい。 また、その解説を読みなさい。どの HTML の文法に従うのがよいかを考えなさ い。厳密な HTML の文法に従うことの意義について考えなさい。
Firefox の言語選択機能で、どの言語が選択されているか調べなさい。
この機能を利用してみなさい。複数の言語で記述されているページを探して、 表示が切り替わることを確認しなさい。
締め切りは、2010年5月25日火曜日とする。
(1) HTML で次のような条件を満たす WWW ページを作成しなさい(注意: ホーム・ページでなくともよい)。
(2) Web ページには、ある条件の本で他人の著作物を含めることができる。(1) で作成した WWW ページに、他人の著作物がある場合には、その出典をレポー トに記述しなさい。また、その著作物を WWW ページに利用してもよいことを 示す根拠を説明しなさい。他人の著作物を含めてはない場合には、「他人の著 作物は含まれていない」とレポートに記述しなさい。
(3) (1) で作成した WWW ページがホーム・ペー ジかどうか記述しなさい。ホーム・ページの場合、「ホーム・ページである」 と記述しなさい。そうでない場合、「ホーム・ページではない」と記述しなさ い。
(4) ドメイン名 cosmos20.coins.tsukuba.ac.jp を木構造で考えた時、親の節 は何か。ドメイン名で答えなさい。
(5) ドメイン名 cosmos20.coins.tsukuba.ac.jp を木構造で考えた時、兄弟の 節の例を示しなさい。ドメイン名で答えなさい。
(6) The Unix Super Text の次の部分を読みなさい。
(7) [加点] (1) のページが英語以外の言語の場合、英語、英語の場合、日本語 で同一内容のページを作成しなさい。それらのページの間で相互にリンクを貼 りなさい。
(8) [加点] WWW サーバ Apache には コンテントネゴシエーション 機能の機能がある。この機能を使うと、同じ URL でも、ブラウザの設定により (異なる言語による)異なる内容のページが返される。この機能を用いた WWW ページを作成しなさい。また、Firefox やその他のブラウザの機能を用いて、 そのことを確認しなさい。