2017年05月19日 情報科学類 コンピュータリテラシ 筑波大学 システム情報系 情報工学域 新城 靖 <yas@cs.tsukuba.ac.jp>
このページは、次の URL にあります。
http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2017/2017-05-19
あるいは、次のページから手繰っていくこともできます。
http://www.coins.tsukuba.ac.jp/~yas/
http://www.cs.tsukuba.ac.jp/~yas/
HTML で記述できる文書の構造:
表示の方法:
<HTML> <HEAD> <META HTTP-EQUIV="content-type" CONTENT="text/html;charset=iso-2022-jp"> <TITLE>スタイルシートの例題:タグへの設定</TITLE> <STYLE TYPE="text/css"><!-- H1 { color: blue; } --></STYLE> </HEAD> <BODY> <H1>青いH1の見出し</H1> <H2>普通のH2の見出し</H2> </BODY> </HTML>[表示例]
(1) HTML のヘッダ
<HTML> <HEAD> <TITLE>タイトルです。</TITLE> <STYLE TYPE="text/css"><!-- (ここにスタイルシートを書く) --></STYLE> </HEAD>
(2) 別のファイル
「スタイルシートのURL」は、filename.css
のようなファイル名が多い。
<HTML> <HEAD> <TITLE>タイトルです。</TITLE> <LINK rel="stylesheet" type="text/css" href="スタイルシートのURL"> </HEAD>
<HTML> <HEAD> <TITLE>タイトルです。</TITLE> <STYLE TYPE="text/css"><!-- @import url(スタイルシートのURL); (別ファイルに加えてここにもスタイルシートを書くことができる) --></STYLE> </HEAD>
(3) HTML のタグの属性
<P STYLE="color:blue">文。文。文。</P>
/*
と */
で括った部分がコメントとなる。
この表記法法は、C言語やJava言語と似ている。
(他の言語では、この表記法は使えないことがある。)
コメントは、デバッグ時など一時的に
コンピュータ言語の機能を無効にしたい時にも使える。
セレクタ { 宣言; } セレクタ, セレクタ, ..., セレクタ { 宣言;宣言;宣言; }1つひとつの宣言は、次の形式。
プロパティ:式「式」には、数、文字列、%、単位つきの長さ、URL などが書ける。
H1 { color: blue; }
#n10 { color:blue; } /* id="n10" と指定したものだけ */ ... <H1 id="n10"> .... </H1>
<HTML> <HEAD> <META HTTP-EQUIV="content-type" CONTENT="text/html;charset=iso-2022-jp"> <TITLE>スタイルシートの例題:クラスの利用</TITLE> <STYLE TYPE="text/css"><!-- .important { color:red; } /* class="important" と指定したものだけ */ --></STYLE> </HEAD> <BODY> <H1>普通のH1の見出し</H1> <P> 普通のパラグラフ </P> <P class="important"> 重要なパラグラフ </P> <H2>普通のH2見出し</H2> <H2 class="important">重要な普通のH2見出し</H2> <P> 普通の言葉。<SPAN class="important">重要な言葉。</SPAN>普通の言葉。 </P> </BODY> </HTML>[表示例]
注意点
CSSのクラスは、しばしば <DIV>タグや<SPAN>タグとともに利用 される。
H1 { color: blue; }
H1 { color: #0000ff; }
http://www.w3.org/TR/html40/types.html
参照。
HTML ではできないが、CSSでは、次の方法も有効。
H1 { color: rgb(0,0,255); }/* 0 から 255 */
H1 { color: rgb(0%,0%,100%); }/* 0% から 100% */
http://www.tohoho-web.com/css/,とほほのスタイルシート入門
http://www.w3.org/Style/CSS/,W3C Cascading Style Sheets home page
(http://www.a2ztutorial.com/Style/CSS/,日本語
)
http://jigsaw.w3.org/css-validator/,W3C CSS Validator
http://validator.w3.org/,W3C HTML Validator
~/.forward
というファイルに、転送先のアドレスを書く。
たとえば、
shiro@himalaya.is.tsukuba.ac.jp
に届いたメールを全て
shiro@alps.is.tsukuba.ac.jp
に転送したいとする。この時、
himalaya
の方のホーム・ディレクトリの下の
~/.forward
に次のように書く。
shiro@alps.is.tsukuba.ac.jp単純に転送先のアドレスを書く方法では、
~/.forward
が
あるホストには、何も残らないが、コピーを残しながら、転送する方法もある。
それには、次のように自分のログイン名に\
を付けたア
ドレスを含める。
\shiro, shiro@alps.is.tsukuba.ac.jp注意:「
\
」は、ASCII 「5c(16進数)」である。
「\」と表示されたり「¥」と表示されることがある。
「/」ではない。
この例では、himalaya に届いた電子メールは、himalaya
と
いうホストの
\shiro
というユーザの
配送プログラム用メール・ボックスに入り、
さらに、shiro@alps.is.tsukuba.ac.jp
にも送られる。
alps
にログインした時にも、
alps
と himalaya
の両方のメールが読め、
また、himalaya
にログインしてもやはり
alps
と himalaya
の両方のメールが読める
と便利に思えるかもしれない。しかし、こうすることは技術的に難しいので、
しばらくはあきらめて欲しい。
\loginname
の機能をつかっても、なかなかうまくいかない。
たとえば、次のよう
な ~/.forward
を作成したと考える。(実際に実行すると危険なので、
考えるだけする。)
(alps:~/.forward) \shiro, shiro@himalaya.is.tsukuba.ac.jp
(himalaya:~/.forward) \shiro, shiro@alps.is.tsukuba.ac.jpこの状態で、
shiro@alps.is.tsukuba.ac.jp
にメールが届いた
場合、次のようなことが起る。
alps
にコピーが残され、かつ、
shiro@himalaya.is.tsukuba.ac.jp
に送らる。
himalaya
では、やはり、コピーが残され(ここまでは順調)、
さらに、shiro@alps.is.tsukuba.ac.jp
に送られる(!)。
alps
では、コピーが残され(2回目)、himalaya
に送られる。
himalaya
では、コピーが残され(2回目)、
さらに、shiro@alps.is.tsukuba.ac.jp
に送られる。
alps
では、コピーが残され(3回目)、himalaya
に送られる。
himalaya
では、コピーが残され(3回目)、
さらに、shiro@alps.is.tsukuba.ac.jp
に送られる。
alps
では、コピーが残され(4回目)、himalaya
に送られる。
himalaya
では、コピーが残され(4回目)、
さらに、shiro@alps.is.tsukuba.ac.jp
に送られる。
3ヵ所以上でこの設定をしたとすると、中継される度にメールが増殖する。
\loginname
の機能を使っていなかったとすると、コピーは
残らないが、メールが行き来するだけで、どこにも届けられずにエラーになる。
~/.forward
の設定をしたら、必ず自分で自分あてに電子メールを出
して届くかテストすること。~/.forward
の設定を間違えると、エラー
のメールも届かなくなるので、エラーが起こっていることさえわからなくなる。
~/.forward
の機能は、もともとは、sendmail という種類のMTA の機
能である。他の MTA (qmail, postfix)でも使えるように設定していることが多い。
~/.forward
の応用として、他のアドレスに電子メールを転送するの
ではなく、(サーバ上で実行される)プログラムに転送する機能がある。すな
わち、(サーバ上で)プログラムを実行して標準入力に電子メールの内容を与
えるという機能がある。これには、次のように~/.forward
に書く。
"| /program/path/name arg1 arg2 arg3 ... argn"このように、
|
に続いて、プログラムのパス名と引数を書き、
全体を ""
で括る。
この機能を使って、受け取った電子メールを自動的に分類したり、
spamメール
を排除したりすることができる。たとえば、MH の
slocalやprocmail
と呼ば
れているプログラムがこの機能を使っている。
C-b backward-char C-f forward-char C-p previous-line C-n next-line C-v scroll-up 次のページへ移動 M-v scroll-down 前のページへ移動 M-< beginning-of-buffer ファイルの先頭へ移動 M-> end-of-buffer ファイルの末尾へ移動
M-v
は、
Esc v
、つまり、Esc キーを打ち、(Esc キーを離し)、v キーを打つ。
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 で修正してもできる。
次のようにして、「ことえり」の設定を確認しなさい。そして、キーボードの 「¥」でバックスラッシュが入力されるように設定しなさい。
coins 以外に日常的に読み書きするメール・アカウントがある人は、毎日 coins に届いたメールを確認する方法として~/.forward を設定して、転送する 方法が考えられる。そのようにしたい人は、そうしなさい。
~/.forward は、emacs でテキスト・ファイルとして作成するとよい。
$ emacs ~/.forward
$ cat ~/.forward
\s1754321, myaddr@xxx.yyy.zzz
(これは一例なので真似しないように)
$
設定が完了したら、必ず自分自身の coins のアドレス
(例えば学生番号が 201754321 なら
s1754321@coins.tsukuba.ac.jp
)にメールを書き、次のことを
確認しなさい。
方法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 のショートカット・キーの解除
を試しなさい。
http://www.coins.tsukuba.ac.jp/ce/,学類コンピューティング環境
のページ
を開く
"skin/pukiwiki_gs2.css.php?charset=Shift_JIS&gs2color="
)
http://www.coins.tsukuba.ac.jp/ce/
に
"skin/pukiwiki_gs2.css.php?charset=Shift_JIS&gs2color="
を合わせて
http://www.coins.tsukuba.ac.jp/ce/skin/pukiwiki_gs2.css.php?charset=Shift_JIS&gs2color=
となる。
$ lv ~yas/public_html/htdocs/coins/literacy-2017/2017-05-19/blue-h1.html
<STYLE TYPE="text/css"><!-- H1 { color: blue; } --></STYLE>この記述を、自分自身が作成した HTML ファイルに含めてみなさい。 自分自身が作成した HTML ファイルで、H1 タグを使っていない人は、 他のタグを変更しなさい。
$ lv ~yas/public_html/htdocs/coins/literacy-2017/2017-05-19/important.html
<STYLE TYPE="text/css"><!-- .important { color:red; } /* class="important" と指定したものだけ */ --></STYLE>この記述を、自分自身が作成した HTML ファイルに含めてみなさい。 さらに、次のように、タグに class 属性を加えてみなさい。
<P class="important"> ... <H2 class="important">重要な普通のH2見出し</H2> ... <SPAN class="important">重要な言葉。</SPAN>
以下の問題、および、回答をテキスト・ファイルに記述し、 レポート提出ページから提出しなさい。
(1) 電子メールの転送について、当てはまる行の先頭に yes, 当てはまらない 行の先頭に no と記述しなさい。
(a) coins 以外に電子メールのアカウントがある。 (b) coins のメールを毎日読む。 (c) ~/.forward の機能を理解した。 (d) ~/.forward を設定した。 (e) ~/.forward を設定し、メールを出してみてテストをし、かつ、意図した通りに動作することを確認した。 (f) 複数の場所で転送機能を設定した。 (g) 複数の場所で転送機能を設定し、かつ、それらの間でループがある。~/.forward を設定した人は、その内容を insert-file 等でレポートに含めなさい。 練習問題 .forwardの設定と確認 参照。
(2) 情報科学類の学生は、coinsに届いたメールを毎日確認することが期待され ている。あなた自身がどのようにして毎日確認するかを書きなさい。
(3) HTML と CSS で次のような条件を満たす WWW ページを作成しなさい。
練習問題 スタイルシートの記述(タグ)、 練習問題 スタイルシートの記述(クラス)参照
(4) The Unix Super Text の次の部分を読みなさい。
(5) The Unix Super Text の次の部分を読みなさい。
(6) [加点] (3) で、このページの説明の範囲を超えたスタイルシートの機能を 3つ以上、利用しなさい。そして、各機能の説明、どこに利用しているか、およ び、その機能の有用性を書きなさい。( CSSの利用 例や、その他のCSSの利用例で紹介されてい るものを利用してもよい。)
各機能が有効となる Web ブラウザの種類を 3 つ以上示しなさい。
各機能が有効ではない Web ブラウザの種類を 2 つ以上示しなさい。この場合 でも、作成したスタイルシートを含むページの内容がアクセスできることを確 認しなさい。
(7) [加点] The Unix Super Text の次の部分を読みなさい。
これらの3つのプログラムのうち、1つについて、次の機能を利用するための設 定方法を示しなさい。ただし、coins で実際に設定する必要はない。全体で2つ 以上の機能の利用方法を示しなさい。