2017年05月16日 情報科学類 コンピュータリテラシ 筑波大学 システム情報系 情報工学域 新城 靖 <yas@cs.tsukuba.ac.jp>
このページは、次の URL にあります。
http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2017/2017-05-16
あるいは、次のページから手繰っていくこともできます。
http://www.coins.tsukuba.ac.jp/~yas/
http://www.cs.tsukuba.ac.jp/~yas/
ハイパーテキストを拡張し、テキスト・データだけでなく、音声や画像などの データを扱えるようにしたものを、ハイパーメディア(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 で書かれている事を表わしている。
WWW ブラウザは、整形された HTML ではなく、整形前の元の HTML (source) を表示する機能がある。
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 で記述できる文書の構造:
表示の方法:
スタイルシートとは、 表示の方法(スタイル)に名前を付けて、ドキュメント単位やパラグラフ単位で どのスタイルを使うかを指定できるようにしたもの。 新しいタグを追加することなく、表示の方法を記述することができる。
WWWページを作る目的は、多くの人にメッセージを伝えることである。そうい う意味では、特定のブラウザでしか使えないような機能は、使わないようにす るべきである。表示の方法よりも内容が大事。
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>
で終る。
おおきく2つの部分、
<HEAD>
,</HEAD>
で囲まれた
ヘッダ(header)
と、<BODY>
,</BODY>
で囲ま
れた
本体(body)
から構成される。
ヘッダの
<TITLE>
,</TITLE>
で囲まれた部
分は、
タイトル
で、タイトルバーなどに表示される。
ヘッダでは、見出し、文字飾り、ハイパーリンクを使うことができない。
◆見出し(heading)
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>表示例:
リストは、 入れ子構造(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
となる。
ハイパーリンクの終点は、同じファイル内、あるいは、別のファイルにあるテ キストのある一部分を差し示すこともできる。そのためには、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="[ペンギンのアイコン]">
インライン・イメージとしてよく使われる画像の形式
.gif
)
.jpeg
,.jpg
)
◆アドレス
HTML文書の最後には、普通、
<ADDRESS>
,</ADDRESS>
タグを使っ
て、その文書の著者の電子メール・アドレスや著者のホーム・ページへのリン
クを書く。これは、このページの内容にきちんと責任を持つことを示している。
HTML記述:
<ADDRESS> who at coins.tsukuba.ac.jp </ADDRESS>表示例:
◆文字飾り
文書内の単語を太字にしたり斜体にしたりする機能を文字飾りとう。
文字飾りで使う2種類のタグ
◆整形済みテキスト
整形済みテキストとは、文字端末(iTerm や sshでログインした時)に表示されたコンピュー
タの出力である。たとえば、
「コマンドプロンプト」やシェルとの対話の画面の様子をHTMLの文書に張り付
る時に使う。
<PRE>
</PRE>
で該当部分を囲ん
だ中では、空白やタブや改行がそのまま有効になる。
HTML記述:
<PRE> May 2017 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 2017 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 2017 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 2017 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で使えない文字
次の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ページに含めないほうがよい情報
漢字コード については、選択可能なら、電子メールと同じく 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>
<HEAD> <META HTTP-EQUIV="content-type" CONTENT="text/html;charset=UTF-8"> </HEAD>
ワードプロセッサによるテキストでの出力、MacOSX やWindows のテキスト・エ ディタの多くは、Shift JIS を出力することが多い。
ls -l コマンドを実行するとカレントディレクトリのファイルや ディレクトリの属性が表示される。
$ ls -l
total 99
drwx------ 4 yas prof 3072 4 10 17:37 Desktop
drwx------ 3 yas prof 1024 3 11 13:52 Documents
drwx------@ 34 yas wheel 2048 4 18 10:05 Library
drwx------ 20 yas prof 2048 4 18 10:57 Maildir
drwx------ 2 yas prof 1024 4 21 16:03 Music
-rw-r--r-- 1 yas prof 3178 4 15 15:56 file100.txt
-rw-r--r-- 1 yas prof 25 4 15 15:58 file30
-rw-r--r-- 1 yas prof 2550 4 15 15:59 literacy-a2.txt
-rw-r--r-- 1 yas prof 2550 4 15 15:57 literacy-a2.txt~
...
$
行単位に次のようなファイルやディレクトリの属性が表示さる。
drwx------,drwxr-xr-x,-rw-------
など)
6,4,17,... など
)
yas
)
prof
)
3072,1024,25
など)
4月10日17時37分
など)
Desktop
など)
ファイルの型
モードの一番左1文字は、ファイルの型(type)を表わす。-
d
許可されたアクセス方法
モードからファイルの型を除いた部分はアクセスの可否を決めるための 情報。9文字ある。左から3文字の固まりが3組ある。
ファイルのモードの例
各3文字はアクセス毎にその許可・拒否を表す。
r 読込み可 w 書込み可 x 実行可(ディレクトリの場合は探索可)モードで該当する部分が「
-
」の場合は、その種類のアクセスが許可さ
れてないことを意味する。
「読込み可」とは、その内容を参照できること意味する。たとえば、cp コマン ドでコピーできる。読出し可能なディレクトリなら、ls コマンドでそのディレ クトリ中のファイル名の一覧を表示できる。
「書込み可」とは、その内容を変更することができることを意味する。たとえ ば、テキスト・ファイルなら、エディタで修正したものを書き込むことができ る。書込み可能なディレクトリなら、mv コマンドでそのディレクトリのなかに あるファイル名前を変更できる。
「実行可」というのは、ファイルの内容がプログラムの場合は、 そのプログラムを実行することができる。
ディレクトリに対する 「検索可」というのは、その下にあるファイルやディレクトリを たどっていける(ファイルを開く(読み書きのため)、cd (change directory)できる)という意味である。
ディレクトリが「読込み可」でも、「検索可」でないと、 ディレクトリに「読込み可」のファイルがあっても、 ディレクトリに入ってファイルを読むことができない。 逆に、「検索可」でも、ディレクトリが「読込み可」でないと、 ディレクトリにあるファイル名やディレクトリ名を表示させることが できない。
そのディレクトリにあるファイル名を知っていて、そのファイルが「読み込み 可」なら読むことがでる。
アクセスするユーザによって異なったアクセスの許可・拒否がしたいことがあ る。そのために、rwxの指定は、ファイルの所有者、ファイルの属すグループ、 それ以外の人用に3セット用意されている。
例:モードが「rw-r--r--
」のファイル
rw-
」、
つまり「読み書きはできるが、実行はできない」
r--
」、つまり「読めるが書いたり実行したりはできない」
r--
」、つまり「読めるが書いたり実行したりはできない」
B | |||
0 | 1 | ||
A | 0 | 0 | 0 |
1 | 0 | 1 |
B | |||
0 | 1 | ||
A | 0 | 0 | 1 |
1 | 1 | 1 |
A | NOT A |
0 | 1 |
1 | 0 |
0101 AND 1100 -------- 0100
0101 OR 1100 -------- 1101
NOT 0101 -------- 1010
0x829e5601 AND 0xffff0000 -------------- 0x829e0000
130.158. 86. 1 AND 255.255. 0. 0 ------------------- 130.158. 0. 0
IPv4 のネットマスクの例
情報量の単位と同様に、通信速度にも次のような係数がことがある。
実習室のパソコンは、1G bps で学内LANに接続されている。
学内LANの基幹部分は、1G bps - 16G bps で接続されている。
筑波大学学内LANは、 SINET5 (2016年-)へ 100Gbps、 で繋がっている。 ただし、 coins、宿舎、無線LAN等の一般的な所から利用する時には、 全体で 30G bps という制約がある。 また、 防火壁(ファイアウォール(firewall)) という、セキュリティを高める仕組みが働くため、速度が低下することもある。
実習時間中には、 以下の課題をできるだけ多く行いなさい。全部を行う必要はない。
Firefoxブラウザを操作して、 元の HTML (ソース)を表示 しなさい。
$ ls -l literacy-a2.txt
(1つのファイルの属性の表示)
$ ls -l literacy-a*.txt
(複数のファイルの属性の表示)
$ ls -ld ~
(ホーム・ディレクトリの属性の表示)
$ cd
(ホーム・ディレクトリへ移動)
$ ls -ld
(カレントワーキングディレクトリ==ホーム・ディレクトの属性の表示)
ファイルの属性 を参考にして、ls -l の結果を、解釈しなさい。今日の実習では特に 次の属性について着目しなさい。
r 読込み可 w 書込み可 x 実行可(ディレクトリの場合は探索可)
筑波大学情報学類コンピューティング環境では、個人の WWW ページは、次のよ うな URL で参照される。
http://www.coins.tsukuba.ac.jp/~ユーザ名/
ユーザ名
」を、ログインの時に打つ自分のユーザ名
で置き換える。たとえば、学籍番号が 201754321 の人は、次のような URL で
参照される。
http://www.coins.tsukuba.ac.jp/~s1754321/
~/public_html/htdocs
$ 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 コマンドで変更して もらいなさい。chmodコマンドの使い方は、この授業の後半で行う。
注意:この練習問題は、練習問題 (903)WWW ページ用のディレクトリ作成の後に行いなさい。
ディレクトリ ~/public_html/htdocs/
の下に、単純なテキスト・ファイル
(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
ユーザ名
」を、ログインの時に打つ自分のユーザ名で置き
換えなさい。たとえば、学籍番号が 201754321 の人は、次のような URL を開
きなさい。
http://www.coins.tsukuba.ac.jp/~s1654321/file1.text
HTTP で始まる URL には、public_html/htdocs
は含まれないことに注
意しなさい。
注意:この練習問題は、練習問題 (903)WWW ページ用のディレクトリ作成の後に行いなさい。
次の HTML ファイルを、ディレクトリ ~/public_html/htdocs
の下にコピー
し、それを Web ブラウザ表示しなさい。
~yas/public_html/htdocs/coins/literacy-2017/samples/sample1.html
$ cd ~/public_html/htdocs
$ ls
(sample1.htmlが存在しないことを確認する。)
$ cp ~yas/public_html/htdocs/coins/literacy-2017/samples/sample1.html .
$ ls -l sample1.html
-rw-r--r-- 1 yas prof 525 5 14 16:19 sample1.html
$
最後のカレント・ワーキング・ディレクトリの意味の「.」を忘れないこと。
ls -l の結果、その他(others)に対するアクセス許可で r ビットが立っている
ことを確認しなさい。
コピーした後、Web ブラウザで次の URL を開きなさい。
http://www.coins.tsukuba.ac.jp/~ユーザ名/sample1.html
ユーザ名
」を、ログインの時に打つ自分のユーザ名で置き
換えなさい。たとえば、学籍番号が 201754321 の人は、次のような URL を開
きなさい。
http://www.coins.tsukuba.ac.jp/~s1754321/sample1.html
HTTP で始まる URL には、public_html/htdocs
は含まれないことに注
意しなさい。
個人のホーム・ページを作成しなさい)。 各自のホーム・ページは、次の HTML ファイルに対応する。
~/public_html/htdocs/index.html
http://www.coins.tsukuba.ac.jp/~ユーザ名/index.html
http://www.coins.tsukuba.ac.jp/~ユーザ名/
URL でディレクトリを指定すると、自動的にそのディレクトリにある 「index.html」という名前のファイルが使われる。この機能を使うと、 各自のホーム・ページは、次のように短く表示できる。
http://www.coins.tsukuba.ac.jp/~ユーザ名/
Emacs で拡張子が .html のファイルを開くと、「HTML モード」と呼ばれるモー ドになり、HTML の編集に有用な機能が働くようになる。 たとえば、タグに色をつけたり、タグ付けされているテキストに下線を 引いて表示する機能がある。
次のようにして、どのような機能が利用可能か調べなさい。
M-x describe-mode
C-x 1
(Control+x の後に数字の1) と打つ。一度 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
で終了
$ ls -l literacy-a5.txt
-rw-r--r-- 1 yas prof 1990 5 8 21:17 literacy-a5.txt
$ ls -l literacy-a6.txt
ls: literacy-a6.txt: No such file or directory
$ cp literacy-a5.txt literacy-a6.txt
$ ls -l literacy-a6.txt
-rw-r--r-- 1 yas prof 1990 5 8 2017 literacy-a6.txt
$
C-SPC
、または、C-@
でマークを設定する。
C-w
でカットする。
C-SPC
でマークを設定できない場合には、
Spotlight のショートカット・キーの解除
を試しなさい。
ifconfig コマンドを使って実習室の自分が利用している iMac の ネットマスク を調べなさい。
$ ifconfig -a
$ ifconfig en0
MacOSX の場合、en0 や en1 の項目の inet の行に IPv4 の IP アドレスと
ネットマスクが表示される。
ネットマスクは、netmask というキーワードの次に表示される。
IPv6 の場合、inet6 の次に、IPアドレスとネットマスク(prefixlen) が
表示される。
次の例では、IPv4 の IP アドレスは、130.158.86.202 である。 (実行するコンピュータによって、異なる。) ネットマスクは、0xfffffe00 (16進数で fffffe00)である。 IPv6 の IP アドレスは、fe80::6a5b:35ff:fe99:fcfe, 2001:2f8:3a:1701:6a5b:35ff:fe99:fcfe, および、2001:2f8:3a:1701:1801:aa48:c7e0:ddb3 である。 実行するコンピュータや時間によって異なる。 IPv6 の prefixlen は 64 ビットである。
$ ifconfig en0 en0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500 options=10b<RXCSUM,TXCSUM,VLAN_HWTAGGING,AV> ether 68:5b:35:99:fc:fe inet6 fe80::6a5b:35ff:fe99:fcfe%en0 prefixlen 64 scopeid 0x4 inet6 2001:2f8:3a:1701:6a5b:35ff:fe99:fcfe prefixlen 64 autoconf inet6 2001:2f8:3a:1701:1801:aa48:c7e0:ddb3 prefixlen 64 autoconf temporary inet 130.158.86.202 netmask 0xfffffe00 broadcast 130.158.87.255 nd6 options=1<PERFORMNUD> media: autoselect (1000baseT <full-duplex,flow-control,energy-efficient-ethernet>) status: active $
ifconfig コマンドは、MacOSX だけでなく、Linux を含む Unix 系のオペレー ティング・システムで利用できる。コマンドが見つからない時には、次の ようにコマンドを絶対パス名で打ってみなさい。
$ /sbin/ifconfig -a
あるいは、man ifconfig でマニュアルを表示して、探しなさい。
Firefox で保存したい Web ページを表示しなさい。 そして、その内容をファイル保存しなさい。
.html
のファイルをダブルクリックや open コマンドで
開く。
http://
」 で始まる URL 認識して、ファイルを開く。
$ open http://www.coins.tsukuba.ac.jp/
$ open file1.html
この結果、「デフォルトWebブラウザ」として登録されているブラウザが実行さ
れ、その URL で示されたWeb ページやファイルが表示される。この機能を確認
しなさい。
Safari.app を使えば、「デフォルトWebブラウザ」を好みのものに変更するこ とができる。この機能を確認しなさい。
wget は、引数として与えられたURLで指定された資源を取得し、ファイルに保
存するコマンドである。コマンドラインから実行できる。次の例は、資源
http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2017/samples/sample1.html
を取得し、ディレクトリ ~/dir 以下の sample1.html という名前のファイルに
保存している。
$ cd ~/dir
$ wget http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2017/samples/sample1.html
簡単な使い方は、次のようにすれば表示できる。
$ wget --help
または
$ wget --help | lv
wget コマンドは、標準出力に使い方を出力する
これを lv で表示するには、パイプ機能 |
を用いる。
詳しくは、man wget を見なさい。
-o
オプションを使う。
$ cd ~/dir
$ curl http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2017/samples/sample1.html
(画面に表示)
$ curl http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2017/samples/sample1.html | lv
(画面に表示)
$ curl http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2017/samples/sample1.html > sample1.html
$ curl -o sample1.html http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2017/samples/sample1.html
$ curl -O http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2017/samples/sample1.html
curl コマンドを利用してみなさい。詳しくは、man curl を見なさい。
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
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/
参照。
M-x font-lock-mode
Another HTML-lint gateway (ミラーサイト) を使って、作成したページの検査を行いなさい。 また、その解説を読みなさい。どの HTML の文法に従うのがよいかを考えなさ い。厳密な HTML の文法に従うことの意義について考えなさい。
Firefox の言語選択機能で、どの言語が選択されているか調べなさい。
この機能を利用してみなさい。複数の言語で記述されているページを探して、 表示が切り替わることを確認しなさい。
その他の Addon については、
https://addons.mozilla.org/firefox/
等を見なさい。
(1) 練習問題(901) から 練習問題(905) を 行いなさい。その後、HTML で次のような条件を満たす WWW ページを作成しな さい(注意: ホーム・ページでなくともよい)。
注意2: 作成する WWW ページがホーム・ページ
ならば、~/public_html/htdocs/index.html
というファイルを用いても
良い。ホーム・ページではないならば、
~/public_html/htdocs/index.html
とは別のファイル名を用いなさい。
(2) Web ページには、ある条件の本で他人の著作物を含めることができる。(1) で作成した WWW ページに、他人の著作物がある場合には、その出所をレポー トに記述しなさい。また、その著作物を WWW ページに利用してもよいことを 示す根拠を説明しなさい。他人の著作物を含めてはない場合には、「他人の著 作物は含まれていない」とレポートに記述しなさい。
(3) (1) で作成した WWW ページがホーム・ペー ジかどうか記述しなさい。ホーム・ページの場合、「ホーム・ページである」 と記述しなさい。そうでない場合、「ホーム・ページではない」と記述しなさ い。 ここで、どういう意味で「ホーム・ページ」という言葉を使っているのかを簡 単に説明しなさい。
(4) ビットレートが 1M bps の動画像がある。これを何秒間(何分間、何時間) 感視聴すると、1G バイト (8 G bit)に達するか。計算過程も含めて示しなさい。 ただし、動画再生以外の通信は一切行われないものとする。動画像と共に送ら れる付加的なデータ(パケットのヘッダ等)は無視するものとする。通信の過程 でデータ圧縮は行われないものとする。
(5) 1GB の動画像を含むファイルが Web サーバに置かれている。このファイル を、通信速度が10M bps (bit / s)のネットワークで転送すると、何秒(何分、 何時間)かかるか。計算過程も含めて示しなさい。 ただし、ネットワークの通信速度でデータが転送可能であるものとする。通信 の過程でデータ圧縮は行われないものとする。
(6) 情報科学類の実習室の iMac やサーバが接続されているネットワークでは、 IPv4 のネットマスクとして 255.255.254.0 (16進数で fffffe00) が使われて いる。この値と次の値の AND 演算を行い、その結果を示しなさい。
(7) The Unix Super Text の次の部分を読みなさい。
(8) [加点] 次の課題を1つ以上行いなさい。
(8a) [加点] (1) のページが英語以外の言語の場合、英語、英語の場合、日本語 で同一内容のページを作成しなさい。それらのページの間で相互にリンクを貼 りなさい。
(8b) [加点] WWW サーバ Apache には コンテントネゴシエーション 機能の機能がある。この機能を使うと、同じ URL でも、ブラウザの設定により (異なる言語による)異なる内容のページが返される。この機能を用いた WWW ページを作成しなさい。また、Firefox やその他のブラウザの機能を用いて、 そのことを確認しなさい。
(9) [加点] ハイパーリンクで、 破片識別子(fragment identifier) を利用したページを作成しなさい。 id属性で、HTML の内部にハイパーリンクの先となる マークをつけなさい。そして、 <A>のhref属性では、# を使って、id属性でマークした部分を指し示しなさい。
レポートには、ページ全体の URL と破片識別子で用いた id 属性の値を含め なさい。