Web 情 報 システム マルチメディア 情 報 通 信 ソフトウェア 第 1 章 ~ 第 4 章 1
Web 情 報 システム マルチメディア 情 報 の 流 通 Web 情 報 システム 概 論 デジタルメディアの 特 徴 デジタルメディアの 記 述 HTML (Hyper Text Markup Language) Css (Cascading style sheet) デジタルメディアの 制 御 JavaScript コンピュータとネットワークの 基 礎 Operating system (file system と 木 構 造 ) TCP/IPとHTTP 2
参 考 書 XHTML/css 入 門 HTML5 & CSS3 レッスンブック ソシム ISBN 978-4883378722 HTML, XHTML/css HTML5 & CSS3 デザインブック ソシム ISBN 978-4883379644 Web 標 準 の 教 科 書 秀 和 システム ISBN 978-4798010922 実 践 Web Standerds Design 技 術 評 論 社 ISBN 978-4774136844 HTML5&CSS3 実 践 入 門 ブライアンP.ホーガン ISBN978-4-8443-3048-6 Javascript JavaScript 第 6 版 オライリー ジャパン ISBN 978-4873115733 CGI/サーバ 側 プログラミング 初 めてのPerl 第 5 版 オライリー ジャパン ISBN 978-4873114279 3
準 備 4
Mozilla Firefox, Portable Edition Mozilla Firefox Webブラウザ Microsoft Internet Explorer に 次 ぐシェア Webの 標 準 への 準 拠 の 度 合 いがIEよりよい Portable Edition 持 ち 運 び 可 能 にした 版 USBメモリなどで 同 一 環 境 をどこでも 利 用 できる 5
PortableApps.com http://portableapps.com Applications Internet カテゴリにある 適 当 な 最 新 版 をdownload Ver. 37.0.1 (2015. 4. 8 現 在 ) USBメモリなどにインストールできる 6
Sakura editor テキストエディタ 書 式 のつかない 単 純 な 文 字 列 の 編 集 プログラムを 書 くのに 使 う HTML, CSS, JavaScript 7
第 1 章 WORLD WIDE WEB 8
Web 情 報 配 信 の 概 要 デジタルコンテンツ デジタル 情 報 で 記 述 された 何 らかの 情 報 デジタルメディア デジタルコンテンツを 蓄 積 配 送 などする 媒 体 Web 情 報 システム インターネットにおいて HTTPを 用 いる HTMLを 基 盤 とするコンテンツ 9
前 提 知 識 :コンピュータとOS コンピュータ 電 子 計 算 機 : デジタル 情 報 の 処 理 入 出 力 Operating system 基 本 操 作 プログラム 群 ファイル 入 出 力 ( 通 信 機 能 含 む) ユーザ 管 理 ( 認 証 権 限 ) プロセス 管 理 (マルチタスク プロセス 分 離 ) 10
ファイル OS 内 での 情 報 のひとかたまり( 単 位 ) 人 間 の 認 知 的 なひとかたまり 多 数 のファイル 管 理 木 構 造 で 分 類 格 納 ファイルシステム ディレクトリ 構 造 11
Tree structure 木 構 造 情 報 の 整 理 格 納 ( 図 書 館 での 分 類 ) 順 序 付 けすれば 整 列 できる 整 列 されていると 検 索 が 高 速 OO log nn オーダ 記 法 (ここで nnはデータ 数 ) 性 能 の 振 り 方 で 多 数 の 木 構 造 がある binary tree, B-tree trie 構 造 などの 派 生 形 も 12
木 構 造 と 表 記 (Root) Node01 Node11 Node12 Leaf01 Leaf02 Leaf03 1. 端 から 分 岐 方 向 を 辿 って 示 す 2. 接 点 Node ( 頂 点 vertex) 名 で 示 す 3. 区 切 り 文 字 (/; slash) 4. 左 端 node は 根 root 5. 左 側 が 親 parent 右 が 子 child 6. 一 般 的 に 先 祖 子 孫 という 用 語 も 7. 子 のいないNodeは 葉 leaf Node02 Node03 Node31 例 ) (Root)/Node01/Node12/Leaf03 Node34 Leaf32 Leaf33 Leaf35 ファイルシステムでは 根 の 表 記 を 省 略 /Node01/Node12/Leaf03 Abstract path ( 絶 対 パス) Leaf36 Leaf41 Leaf42 13
Current directory (Root) - 木 構 造 一 般 ではなく ファイルシステムの 話 Node01 Node02 Node03 Leaf41 Leaf42 Node11 Node12 Node31 Node34 Leaf36 Leaf01 Leaf02 Leaf03 Leaf32 Leaf33 Leaf35 1. 絶 対 パスは 間 違 いがないが 長 い! 2. 操 作 対 象 のディレクトリ 3. 今 操 作 対 象 のディレクトリ Current directory 例 ) (Root)/Node03/ 14
Relative path 相 対 パス (Root) Node01 Node02 Node03 Node11 Node12 Leaf01 Leaf02 Leaf03 1. /Node03/ がcurrent directory 2. Current directory 内 のファイル 1. Leaf36 /Node03/Leaf36 3. Current directoryより 下 のディレクトリ 1. Node31/Leaf32 4. 上 ( 親 )ディレクトリも 指 し 示 したい 5... ひとつ 上 6.../Node02 Node31 Leaf32 7.../Node01/Node12/Leaf03 Node34 Leaf33 8.../../ のように2つ 上 も 示 せる Leaf35 Leaf36 Leaf41 Leaf42 15
HTML コンテンツ( 間 )の 構 造 を 記 述 1991 年 ~ 現 在 は HTML5 (Recommendation) 2014-12-08 現 在 の 最 新 は 28 October 2014 http://www.w3.org/tr/html5/ 16
JavaScript Webサーバ HTML インター ネット Server 閲 覧 端 末 クライアント HTML, CSS, JavaScript 組 み 合 わさって 表 示 Client HTML CSS 17
Web 情 報 配 信 モデル Client Server model Client 主 導 HyperText Transfer Protocol (HTTP) 信 頼 性 のある(データが 欠 落 しない) 通 信 路 を 使 う 一 般 的 には TCP/IP 1. 下 位 層 (TCP)で serverに 接 続 2. HTTPで 取 得 したいcontent 識 別 子 を 送 る 3. serverより HTTPでcontentを 受 け 取 る 18
serverへの 接 続 TCP/IP IPアドレスでサーバを 指 定 TCP port 番 号 で サーバ 内 のプロセスを 指 定 IPアドレスの 代 わりにFQDN 名 を 使 うのが 一 般 的 Domain Name System (DNS) 識 別 子 (identifier) www.kogakuin.ac.jp:80 19
contentの 指 定 server 内 ファイル 絶 対 pathで 指 定 HTTPで 公 開 されているディレクトリ 構 造 OS 上 のファイル 構 造 の 一 部 に 一 致 させる 運 用 が 多 い /path/to/content.html 20
URL Uniform Resource Locator; 統 一 資 源 位 置 指 定 子 http://www.kogakuin.ac.jp:80/path/to/file.html http : scheme www.kogakuin.ac.jp : host name 80 : TCPport /path/to/file.html : host 上 でのファイル 識 別 子 21
省 略 記 法 TCP port HTTPでは TCP/80 ファイル 名 serverで 決 めた 補 遺 ファイル 名 index.html などが 一 般 的 http://www.kogakuin.ac.jp/path/ http://www.kogakuin.ac.jp:80/path/index.html http://www.kogakuin.ac.jp/path は 誤 りらしい http://www.kogakuin.ac.jp は 正 しい 22
HTML HyperText Markup Language 木 構 造 となるデータ 構 造 を 通 信 できるようテキストで 記 述 する 言 語 プログラム 言 語 と 同 様 コンピュータが 解 釈 根 要 素 (root element)は html Root(html 要 素 ) 直 下 には head と body の2 要 素 headの 下 には title, link, meta など bodyの 下 には h1, p, ul, div など 23
第 2 章 WEBによる 情 報 発 信 の 体 験 24
空 のHTML5 厳 密 に 空 <!DOCTYPE html> <html lang= ja > <head> <title></title> </head> <body> </body> </html> さらに 省 略 もできる <!DOCTYPE html> <html lang= ja > <title></title> </html> 25
空 のHTML5 <!DOCTYPE html> HTML5であることの 宣 言 <html lang= ja > HTMLの 根 要 素 Lang 属 性 で 日 本 語 を 指 定 <head> 文 書 のヘッダ( 付 加 情 報 ) 開 始 <meta charset= utf-8 /> 文 書 の 文 字 コード utf-8を 指 定 <title></title> 文 書 のタイトル </head> ヘッダ 終 了 <body> 本 文 領 域 開 始 <p></p> 段 落 </body> 本 文 領 域 終 了 </html> Html 終 了 26
わかりにくいので 少 し 追 加 <!DOCTYPE html> <html lang= ja > <head> <meta charset= utf-8 /> <title>ここにwebページのタイトルを 書 きます</title> </head> <body> <p>ここが 本 文 で ひとつの 段 落 を 意 味 します </p> </body> </html> 27
Head 要 素 文 書 のメタ 情 報 を 格 納 する Title 文 書 のタイトル Link 他 の 文 書 (resource)との 関 係 詳 しくは 次 回 以 降 28
Body 要 素 文 書 の 本 文 h1, h2, h3,, h6 文 書 の 見 出 し p 段 落 ul 箇 条 書 き 29
要 素 の 記 述 要 素 をテキストで 記 述 する タグで 囲 む 開 始 タグと 終 了 タグ <title> 文 書 のタイトル</title> <p> 段 落 の 中 身 <em> 強 調 文 字 列 </em> </p> <ul> <li>1 個 目 の 項 目 </li> <li>2 個 目 の 項 目 </li> </ul> 30
タグの 記 述 入 れ 子 になると 木 構 造 の 子 を 指 す <ul> <li>1 個 目 の 項 目 <ol> <li> 入 れ 子 の1 番 目 の 項 目 </li> <li> 入 れ 子 の2 番 目 の 項 目 </li> </ol> </li> <li>2 個 目 の 項 目 </li> </ul> 31
開 始 タグと 終 了 タグ 対 応 関 係 は 明 確 に <p><em></p></em> というのはダメ <p><em>...</em></p> ならOK p 要 素 の 下 にem 要 素 がある 32
<!DOCTYPE html> <html lang="ja"> <head> <title>html5 サンプルファイル</title> </head> <body> <section> <h1>web 情 報 システム 理 解 のための 最 初 の 一 歩 </h1> <p> この 科 目 では 次 の4つの 項 目 を 通 じて<br /><em>web 情 報 システムの 動 作 とコンテンツの 記 述 の 基 礎 </em>を 学 び マルチメディア 情 報 流 通 社 会 の 基 盤 技 術 について 理 解 を 深 めます </p> <ul> <li>web 情 報 配 信 の 仕 組 み <ol> <li>webブラウザ(クライアント)は Webサーバに( 通 常 TCP/IPで) 接 続 します </li> <li>クライアントは 欲 しいコンテンツをサーバに 要 求 します </li> <li>サーバは 要 求 に 対 応 するコンテンツ(HTML)を 送 り 返 します </li> </ol> </li> <li>コンテンツの 構 造 を 規 定 するHTML</li> <li>コンテンツの 見 映 えを 規 定 するcss</li> <li>コンテンツの 動 的 性 質 を 規 定 するJavaScript</li> </ul> </section> </body> </html> 33
<body> <h1>まずは 大 見 出 し</h1> <p> 最 初 の 段 落 を 書 いてみます 複 数 の 文 を 含 んで 構 いません <img src= someimage.jpg alt= sample image />の 画 像 のように 文 中 に 含 めることもできます <br /> 改 行 も 表 現 できます これら は 中 身 のテキストがないため 空 要 素 と 呼 ばれます </p> <ul> </ul> <li> 箇 条 書 きの1 番 目 の 項 目 </li> <li> 箇 条 書 きの2 番 目 は さらなる 箇 条 書 き <ul> <li> 入 れ 子 になった 箇 条 書 きの1 番 目 </li> <li> 入 れ 子 になった 箇 条 書 きの2 番 目 </li> </ul> </li> <p>このように 箇 条 書 きを<em> 入 れ 子 </em>にするとどうなるか 確 認 してみましょう </p> </body> 34
Validator (3.4) The W3C Markup Validation Service http://validator.w3.org/ XHTML/HTML 文 書 の 妥 当 性 検 証 コンピュータが 解 釈 できる = エラー0 かを 見 る 35
HTMLは 要 素 をmarkupする 段 落 開 始 ~ 終 了 <p> 段 落 の 最 初 と 最 後 にタグが 必 要 </p> ( 間 違 い 例 ) 段 落 の 区 切 りにタグを 使 う<p> 次 の 段 落 36
h1, h2, h3,, h6 文 書 の 見 出 し section セクション p 段 落 ul, ol Body 要 素 内 の 要 素 箇 条 書 き(ul: 番 号 無 し, ol: 番 号 あり) em, strong 強 調 (em: 強 調, strong: 最 強 調 ) 37
空 要 素 マークアップすべきテキストのない 要 素 Hyper-Text Markup Language Markup: 注 釈 ( 文 書 内 での 指 示 ) meta: HTML 文 書 のメタ 情 報 文 書 自 体 の 説 明 など br: 改 行 img: 画 像 の 挿 入 38
br 要 素 文 字 列 の 改 行 を 表 す 段 落 とは 無 関 係 なので 注 意 すること 乱 用 しない <br /> 開 始 タグと 終 了 タグをひとつで 表 したような 物 空 要 素 を 表 現 するタグ 記 述 39
block element と inline element - HTML5のコンテンツモデル( 一 部 ) HTMLの 要 素 block 要 素 inline 要 素 body 直 下 には block 要 素 いきなりinline 要 素 は 置 けない inline 要 素 下 block 要 素 は 置 けない 40
block 要 素 block level と inline level (HTML4.01までの 概 念 ) 広 い 矩 形 領 域 で 表 示 されることが 一 般 的 な 要 素 p, section, h1..h6, blockquote, div, ul, ol, dl, table など inline 要 素 行 の 一 部 として 表 示 されることが 一 般 的 な 要 素 a, em, strong, br, code, img, q, span 41
flow content コンテントモデル - HTML5 一 般 的 なテキスト 本 文 のようなもの cf. sectioning content, heading content phrasing content 文 書 のテキスト( 段 落 内 にあるもの) formatblock candidate 矩 形 領 域 で 描 画 されようとするもの 42
blockquoteとq blockquote 長 い 引 用 ブロック q 短 い 引 用 文 いずれも 引 用 した 文 などを 指 す 43
Block 要 素 とinline 要 素 良 い 例 <body><p> 本 文 </p></body> 悪 い 例 <body> 本 文 </body> 良 い 例 <p><q>to be or not to be </q>という 言 説 </p> 悪 い 例 <p><blockquote> 引 用 文 </blockquote></p> 44
img 要 素 文 書 中 に 画 像 を 挿 入 ( 貼 る)する 写 真 イラスト 罫 線 区 切 り 装 飾 属 性 要 素 に 細 かい 指 示 を 与 える 挿 入 する 画 像 URL 画 像 が 表 示 できない 環 境 のための 代 替 文 字 列 45
imgタグ <img src=../img/image01.jpg alt= とある 写 真 /> src 属 性 画 像 のありかを 示 すURL httpなどで 始 まるURL / から 始 まるホスト 内 絶 対 path 相 対 path alt 属 性 代 替 説 明 用 文 字 列 46
src 属 性 URL <img src= http://... /> 絶 対 path <img src= /path/to/images/ /> 相 対 path <img src= myphoto.jpg /> <img src= path/to/images/myphoto.jpg /> <img src=../../path/to/images/myphoto.jpg /> 47
alt 属 性 代 替 文 字 列 画 像 の 代 わりに 表 示 発 音 すべき 文 字 列 <img src=... alt= タスマニアの 風 景 写 真 /> 音 声 読 み 上 げブラウザ 画 像 を 見 ない 人 にもスムーズなWeb 体 験 を 48
ハイパーリンク Hyperlink 他 の 文 書 へのポインタ リンクアンカー クリックなどで 他 の 文 書 へ 切 り 替 わる 領 域 a 要 素 href 属 性 <a href= http://www.icu.ac.jp > 国 際 基 督 教 大 学 </a> 内 容 リンクアンカー( 文 字 列 ) 49
a 要 素 URL <a href= http://www.example.com >...</a> 絶 対 path <a href= /abstract/path/ >...</a> 相 対 path <a href= myphoto.jpg >...</a> <a href= path/to/images/myphoto.jpg >...</a> <a href=../path/to/images/myphoto.jpg >...</a> 50
表 table element <table>...</table> 行 と 列 row and column Row 1: Row 2: Row 3: Column: 1 2 3 51
表 Row 1: Row 2: Row 3: Column: 1 2 3 セル Rowは tr 要 素 <tr>...</tr> 各 セルは td 要 素 <td>...</td> 52
Row 1: Row 2: Row 3: table 要 素 の 基 礎 Column: 1 2 3 1-1 1-2 1-3 2-1 2-2 2-3 3-1 3-2 3-3 Row: tr element, cell: td element <table> <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr> <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr> <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr> </table> 53
セルの 結 合 横 方 向 の 結 合 縦 方 向 の 結 合 セルの 結 合 1-1 1-2 1-3 2-1 2-3 3-1 3-2 3-3 <table> <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr> <tr><td colspan= 2 >2-1</td> <td>2-3</td></tr> <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr> </table> 54
セルの 結 合 横 方 向 の 結 合 縦 方 向 の 結 合 セルの 結 合 1-1 1-2 1-3 2-1 2-2 3-1 3-2 3-3 <table> <tr><td>1-1</td><td>1-2</td> <td rowspan= 2 >1-3</td></tr> <tr><td>2-1</td><td>2-2</td> </tr> <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr> </table> 55
セルの 結 合 横 方 向 の 結 合 縦 方 向 の 結 合 複 雑 なtable 1-1 1-2 1-3 2-1 3-3 複 雑 な 表 も 組 めます <table> <tr><td>1-1</td><td>1-2</td> <td rowspan= 2 >1-3</td></tr> <tr><td colspan= 2 rowspan= 2 >2-1</td></tr> <tr><td>3-3</td></tr> </table> 56
table : 表 組 み table element tr : 行 (row) td : セルデータ th : セル 見 出 し (tdとは 意 味 が 異 なるだけ) colspan, rowspan : セルの 結 合 を 指 示 する 属 性 57
今 週 のtableを 書 くときに link 要 素 (1 行 に 続 けて 書 いて 良 い) <link rel="stylesheet" type="text/css" href= /~ct13213/cs1/table2.css" /> head 要 素 に 追 記 してください 58
意 味 付 けとmarkup HTMLでのmarkup 文 書 の 意 味 のかたまりに 対 して HTML5 header: 導 入 やナビゲーション 要 素 <header><p>...</p><h1>title strings</h1></header> hgroup: 見 出 しをグループ 化 <hgroup> <h1>main title</h1><h2>...</h2><h3>...</h3> </hgroup> aside: 本 文 との 関 連 性 の 低 い/ 重 要 でない 内 容 59
意 味 付 けの 要 素 HTML5 section: セクション 構 造 article: 記 事 など footer: セクションのfooter nav: ナビゲーション 要 素 figure: 自 己 完 結 した 図 ビ デオなど b: 注 目 を 与 える 箇 所 i: 異 なったトーン 性 質 の 異 なる 箇 所 small: 細 則 など 補 足 的 注 釈 strong: 文 章 の 重 要 度 60
適 切 な 意 味 付 け 要 素 がないとき 意 味 付 けのないグループ 化 のための 要 素 div span 61
divとspan div ブロック 的 なグループ 化 <div><ul>...</ul><ol>...</ol></div> span 行 内 でのグループ 化 <p>...<span><strong>...</strong>...</spa n>...</p> 単 なる 容 れ 物 cssやjavascriptとの 連 携 で 用 いる 62
要 素 に 名 前 を id 属 性 文 書 内 で 唯 一 (unique)の 名 前 <div id= sample01 >...</div> class 属 性 複 数 の 要 素 に 亘 る 名 前 付 け <p>...<span class= red >...</span>...</p> <table class= red >...</table> 63