计算机理论入门09
- 1. 計算機理論入門 9
2012 年度後期
垂水共之
tarumi@ems.okayama-u.ac.jp
ＨＴＭＬ
- 2. ワープロ
? Tag 形式と WYSIWYG(What You See Is What You Get)
– 画面に表示されているものがそのまま印刷されて得られる
WYSIWYG が最近のワープロの標準であるが、そのためには画面
の解像度が高い必要がある。昔の計算機はプリンタの解像度に
比べ、画面の解像度や計算能力が非力であったため、出力形式
を「タグ」で指示するタグ形式が多かった .(RUNOFF)
– その後、画面の高解像度化に伴い、 WYSIWYG に移行するもの
の、数式等を含めよりきれいな出力を得るためには WYSIWYG
よりもタグ形式を積極的に使用するシステムを出てきた (TeX,
LaTeX) 。特に TeX の系列はタグ形式で指定した表示形式を出力
機器とは独立な DVI ファイル (Device Independent File) に変換し
、この DVI ファイルから目的の機器へ出力する形式を採用して
いる。このため、同じタグを埋め込んだテキストを作り、 DVI
ファイルへ変換しておくことにより、低解像度のプリンタから
高解像のレーザープリンタ、写植機まで目的の合った出力を得
ることができる。
– 同様のものとしてはプリンタに頭脳を持たせ、プリンタへ出力
形式をテキストで与える PostScrip 形式もある。
- 3. begin{verbatim}
%!PS-Adobe-2.0
%%Title: psout.ps
PostScript
%%Creator: gnuplot 3.5 (pre 3.6)
%%CreationDate: Thu Nov 26 21:17:35 1998
%%DocumentFonts: (atend)
%%BoundingBox: 50 50 554 770
%%Orientation: Landscape
%%Pages: (atend) ============= Y 軸の目盛り
%%EndComments 420 280 M
/gnudict 120 dict def 0 63 V
gnudict begin 0 4529 R
/Color false def 0 -63 V
/Solid false def 420 140 M
/gnulinewidth 5.000 def (-10) Cshow
/userlinewidth gnulinewidth def ============= 省略
/dl {10 mul} def 7032 280 M
/M {moveto} bind def 0 63 V
/L {lineto} bind def 0 4529 R
/R {rmoveto} bind def 0 -63 V
/V {rlineto} bind def 0 -4669 R
/Rshow { currentpoint stroke M (10) Cshow
dup stringwidth pop neg vshift R show } def 1.000 UL
=================== LTb
end 420 280 M
%%EndProlog 6612 0 V
%%Page: 1 1 0 4592 V
gnudict begin -6612 0 V
gsave 420 280 L
50 50 translate 1.000 UL
0.100 0.100 scale LT0
90 rotate 6381 4739 M
0 -5040 translate (x) Rshow
0 setgray 6465 4739 M
newpath 399 0 V
1.000 UL 420 280 M
LTb 67 46 V
============= X 軸の目盛り 67 47 V
420 280 M ======== 省略
63 0 V 66 46 V
6549 0 R 67 47 V
-63 0 V 67 46 V
336 280 M stroke
(-10) Rshow grestore
============== 省略 end
420 4872 M showpage
63 0 V %%Trailer
6549 0 R %%DocumentFonts: Helvetica-Ryumin
-63 0 V %%Pages: 1
-6633 0 R end{verbatim}
(10) Rshow
- 4. HTML
? 目的は少し異なるが、タグ形式を使ったものとしてイン
ターネットの WWW で利用されている HTML(Hyper
Text Markup Language) 言語がある。いわゆる「ホームペ
ージ」を記述しているのが HTML 言語であり、タグを埋
め込んだテキストファイルにすぎない。このテキストは
「ブラウザ」を通すことにより、画面上では整形された
形式で眺めることができる。
? HTML 自身は SGML(Standard Generalized Markup
Language) を参考に作られた、 HTML の拡張として SGML
のサブセットである XML(eXtensible Markup Language) が
定められた。
? 最近は HTML5 の規格が作られ、徐々に普及し始めてい
る。 HTML5 は電子書籍の一つである ePUB でも使われ
- 5. URL Uniform Resource Locator
? Internet 上のリソース（資源；ファイル、情報等）の統
一的な表示（記述）法
? 例
http://www.okayama-u.ac.jp/tp/student/kyomu1_5.html
? 一般形式
スキーム
スキーム スキームごとに決められた記述形
： スキームごとに決められた記述形
：
名
名 式
式
? スキーム名 プロトコル名が使われることが多い
– http, https
– ftp
– telnet
– file
- 6. 特定のホストを指定する場合（多くの場合）
? http, ftp, telnet 等特定のホストに IP 接続する場合
スキーム
スキーム パスワー ：ポート番
:// ユーザー ： パスワー ＠ ホスト名 ：ポート番 // パス名
:// ユーザー ： ＠ ホスト名 パス名
名
名 ド
ド 号
号
? よく使われるのは
スキーム
スキーム :// ホスト名 // パス名
:// ホスト名 パス名
名
名
? 例
http://www.okayama-u.ac.jp/tp/student/kyomu1_5.html
? ホスト名 次の何れかで指定（最終的には IP アドレスに
）
– ドメイン名
– IP アドレス
- 7. プロトコル
? http
– Hyper text transfer protocol
? ftp
– File transfer protocol
? telnet
– Telecommunication network protocol
- 8. http
? http = Hyper Text Transfer Protocol
– ホーム頁閲覧のためのプロトコル
– HTML で記述された Hyper Text を表示する「ブラウザ」ソフト
? Internet Explorer (IE)
? Firefox
? Safari
? Chrome
? HTML = Hyper Text Markup Language
– ホーム頁記述言語（記述形式）
– テキストで指定
– グラフ、画像
? 画像ファイルのファイル名 URL で指定 (img タグ )
? その画像、グラフを描くスクリプト (Javascript, postscript,
SVG など )
- 9. ホーム頁を作ってみよう
? エディタで次のような内容のファイルを作り、
「 home1.htm 」というファイル名で保存しよう！
<html>
<head>
<title> タイトル </title>
</head>
<body>
<h1> 見出し </h1>
<p> 最初の頁を作ってみた。
数行書いてみよう。 </p>
<p> 別パラグラフにしてみた。 </p>
<p> 画像（写真）は png 、 j ｐｇ、 gif フィルが使えるが
最近は png が主流になりつつある。 <br />
次のように img タグを使えばよい。
<img src=/slideshow/09-16775441/16775441/"photo.jpg/slideshow/09-16775441/16775441/" />
<img src=/slideshow/09-16775441/16775441/"http://www.okayama-u.ac.jp/img/_ja/title.gif/slideshow/09-16775441/16775441/" />
</p>
</body>
</html>
- 10. HTML(5 風 ) の書き方
? タグ
＜タグ名 パラメータ＞内容＜ / タグ名＞
開始タグ 終了タグ
? タグ名 小文字
? 終了タグを必ず書く
? 内容（コンテンツ）が無い場合は
＜タグ名 / ＞
– 例 <br />
? 半角の空白文字、改行コードは無視される。
- 11. 主なタグ
? html, header, title, body : 既出
? 見出し h1, h2, h3, h4, h5, h6
? 段落 p <p> 内容 </p>
? 改行 br <br />
? 図 img <img src=/slideshow/09-16775441/16775441/" 図の URL ?ファイル
名 /slideshow/09-16775441/16775441/" />
? 箇条書き
– 番号あり ol li <ol><li> リスト１ </li><li> リスト２ </li></ol>
– 番号なし ul li <ul><li> リスト１ </li><li> リスト２ </li></ul>
? リンク（アンカー） a <a href=/slideshow/09-16775441/16775441/"URL/slideshow/09-16775441/16775441/"> 説明 </a>
? 水平線 hr <hr />
? 整形済み pre <pre> 内容 </pre>
? 表組 table, tr, th, td など（少し複雑になる）
- 12. 別の頁へのリンク（アンカー）
? 別のＨＴＭＬファイルへのジャンプや、同一ファイル（
頁）内の離れた場所へのジャンプには a タグを用いる
<html> <html>
<head> <head><title> 中学時代の思い出 </title><head>
<title>page0</title> <body>
</head> <h1> 中学時代の思い出 </h1>
<body> <p> ??? </p>
<ul> </body>
<li> 中学時代 <br /> </html>
<a href=/slideshow/09-16775441/16775441/"page1.htm/slideshow/09-16775441/16775441/"> 思い出 </a>
</li> <html>
<li> 高校時代 <br /> <head><title> 高校時代の思い出 </title><head>
<a href=/slideshow/09-16775441/16775441/"page2.htm/slideshow/09-16775441/16775441/"> 思い出 </a. <body>
</li> <h1> 高校時代の思い出 </h1>
</ul> <p> ??? </p>
</body> </body>
</html> </html>
- 13. MathML 数式
? LaTeX を理解して表示してくれるブラウザも増えてきた
。
? ＷＷＷでの正式の表現はＭａｔｈＭＬ
– ＭａｔｈＭＬを正しく表示してくれるブラウザはまだ少ない
frac{-bpmsqrt{b^2-4ac}}{2a}
<?xml version=/slideshow/09-16775441/16775441/"1.0/slideshow/09-16775441/16775441/" encoding=/slideshow/09-16775441/16775441/"utf-8/slideshow/09-16775441/16775441/" standalone=/slideshow/09-16775441/16775441/"no/slideshow/09-16775441/16775441/"?>
<math xmlns=/slideshow/09-16775441/16775441/"http://www.w3.org/1998/Math/MathML/slideshow/09-16775441/16775441/"
display=/slideshow/09-16775441/16775441/"block/slideshow/09-16775441/16775441/" title=/slideshow/09-16775441/16775441/"frac{-bpmsqrt{b^2-4ac}}{2a} /slideshow/09-16775441/16775441/">
<mrow>
<mfrac>
<mrow>
<mo>-</mo><mi>b</mi><mo>±</mo>
<msqrt><mrow><msup><mrow><mi>b</mi></mrow><mrow><mn>2</mn></mrow></msup>
<mo>-</mo><mn>4</mn><mi>a</mi><mi>c</mi>
</mrow>
</msqrt>
</mrow>
<mrow><mn>2</mn><mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
参考： http://latex2mathml.freewebmaster.fr/demo.php
- 14. SVG Scalable Vector Graphics 図?グラフ
? 拡大?縮小可能な図の描画指示
<svg xmlns=/slideshow/09-16775441/16775441/"http://www.w3.org/2000/svg/slideshow/09-16775441/16775441/"
xmlns:xlink=/slideshow/09-16775441/16775441/"http://www.w3.org/1999/xlink/slideshow/09-16775441/16775441/"
version=/slideshow/09-16775441/16775441/"1.1/slideshow/09-16775441/16775441/"
baseProfile=/slideshow/09-16775441/16775441/"full/slideshow/09-16775441/16775441/">
<g fill-opacity=/slideshow/09-16775441/16775441/"0.7/slideshow/09-16775441/16775441/" stroke=/slideshow/09-16775441/16775441/"black/slideshow/09-16775441/16775441/" stroke-width=/slideshow/09-16775441/16775441/"0.1cm/slideshow/09-16775441/16775441/">
<circle cx=/slideshow/09-16775441/16775441/"6cm/slideshow/09-16775441/16775441/" cy=/slideshow/09-16775441/16775441/"2cm/slideshow/09-16775441/16775441/" r=/slideshow/09-16775441/16775441/"100/slideshow/09-16775441/16775441/" fill=/slideshow/09-16775441/16775441/"red/slideshow/09-16775441/16775441/"
transform=/slideshow/09-16775441/16775441/"translate(0,50)/slideshow/09-16775441/16775441/" />
<circle cx=/slideshow/09-16775441/16775441/"6cm/slideshow/09-16775441/16775441/" cy=/slideshow/09-16775441/16775441/"2cm/slideshow/09-16775441/16775441/" r=/slideshow/09-16775441/16775441/"100/slideshow/09-16775441/16775441/" fill=/slideshow/09-16775441/16775441/"blue/slideshow/09-16775441/16775441/"
transform=/slideshow/09-16775441/16775441/"translate(70,150)/slideshow/09-16775441/16775441/" />
<circle cx=/slideshow/09-16775441/16775441/"6cm/slideshow/09-16775441/16775441/" cy=/slideshow/09-16775441/16775441/"2cm/slideshow/09-16775441/16775441/" r=/slideshow/09-16775441/16775441/"100/slideshow/09-16775441/16775441/" fill=/slideshow/09-16775441/16775441/"green/slideshow/09-16775441/16775441/"
transform=/slideshow/09-16775441/16775441/"translate(-70,150)/slideshow/09-16775441/16775441/" />
</g>
</svg>
参考：
https://dev.mozilla.jp/localmdc/localmdc_10121.html
http://king-of-bb.jp/svg/
