Web情報システム第1章～第5章

Size: px

Start display at page:

Download "Web情報システム第1章～第5章"

とらふみおとじま
7 years ago
Views:

1 Web 情報システムマルチメディア情報通信ソフトウェア第 1 章 ~ 第 4 章 1

2 Web 情報システムマルチメディア情報の流通 Web 情報システム概論デジタルメディアの特徴デジタルメディアの記述 HTML (Hyper Text Markup Language) Css (Cascading style sheet) デジタルメディアの制御 JavaScript コンピュータとネットワークの基礎 Operating system (file system と木構造 ) TCP/IPとHTTP 2

3 参考書 XHTML/css 入門 HTML5 & CSS3 レッスンブックソシム ISBN HTML, XHTML/css HTML5 & CSS3 デザインブックソシム ISBN Web 標準の教科書秀和システム ISBN 実践 Web Standerds Design 技術評論社 ISBN HTML5&CSS3 実践入門ブライアンP.ホーガン ISBN Javascript JavaScript 第 6 版オライリージャパン ISBN CGI/サーバ側プログラミング初めてのPerl 第 5 版オライリージャパン ISBN

4 準備 4

5 Mozilla Firefox, Portable Edition Mozilla Firefox Webブラウザ Microsoft Internet Explorer に次ぐシェア Webの標準への準拠の度合いがIEよりよい Portable Edition 持ち運び可能にした版 USBメモリなどで同一環境をどこでも利用できる 5

6 PortableApps.com Applications Internet カテゴリにある適当な最新版をdownload Ver ( 現在 ) USBメモリなどにインストールできる 6

7 Sakura editor テキストエディタ書式のつかない単純な文字列の編集プログラムを書くのに使う HTML, CSS, JavaScript 7

8 第 1 章 WORLD WIDE WEB 8

9 Web 情報配信の概要デジタルコンテンツデジタル情報で記述された何らかの情報デジタルメディアデジタルコンテンツを蓄積配送などする媒体 Web 情報システムインターネットにおいて HTTPを用いる HTMLを基盤とするコンテンツ 9

10 前提知識 :コンピュータとOS コンピュータ電子計算機 : デジタル情報の処理入出力 Operating system 基本操作プログラム群ファイル入出力 ( 通信機能含む) ユーザ管理 ( 認証権限 ) プロセス管理 (マルチタスクプロセス分離 ) 10

11 ファイル OS 内での情報のひとかたまり( 単位 ) 人間の認知的なひとかたまり多数のファイル管理木構造で分類格納ファイルシステムディレクトリ構造 11

12 Tree structure 木構造情報の整理格納 ( 図書館での分類 ) 順序付けすれば整列できる整列されていると検索が高速 OO log nn オーダ記法 (ここで nnはデータ数 ) 性能の振り方で多数の木構造がある binary tree, B-tree trie 構造などの派生形も 12

13 木構造と表記 (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

14 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

15 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 Leaf /Node01/Node12/Leaf03 Node34 Leaf /../ のように2つ上も示せる Leaf35 Leaf36 Leaf41 Leaf42 15

16 HTML コンテンツ( 間 )の構造を記述 1991 年 ~ 現在は HTML5 (Recommendation) 現在の最新は 28 October

17 JavaScript Webサーバ HTML インターネット Server 閲覧端末クライアント HTML, CSS, JavaScript 組み合わさって表示 Client HTML CSS 17

18 Web 情報配信モデル Client Server model Client 主導 HyperText Transfer Protocol (HTTP) 信頼性のある(データが欠落しない) 通信路を使う一般的には TCP/IP 1. 下位層 (TCP)で serverに接続 2. HTTPで取得したいcontent 識別子を送る 3. serverより HTTPでcontentを受け取る 18

19 serverへの接続 TCP/IP IPアドレスでサーバを指定 TCP port 番号でサーバ内のプロセスを指定 IPアドレスの代わりにFQDN 名を使うのが一般的 Domain Name System (DNS) 識別子 (identifier) 19

20 contentの指定 server 内ファイル絶対 pathで指定 HTTPで公開されているディレクトリ構造 OS 上のファイル構造の一部に一致させる運用が多い /path/to/content.html 20

21 URL Uniform Resource Locator; 統一資源位置指定子 http : scheme : host name 80 : TCPport /path/to/file.html : host 上でのファイル識別子 21

22 省略記法 TCP port HTTPでは TCP/80 ファイル名 serverで決めた補遺ファイル名 index.html などが一般的は誤りらしいは正しい 22

23 HTML HyperText Markup Language 木構造となるデータ構造を通信できるようテキストで記述する言語プログラム言語と同様コンピュータが解釈根要素 (root element)は html Root(html 要素 ) 直下には head と body の2 要素 headの下には title, link, meta など bodyの下には h1, p, ul, div など 23

24 第 2 章 WEBによる情報発信の体験 24

25 空のHTML5 厳密に空 <!DOCTYPE html> <html lang= ja > <head> <title></title> </head> <body> </body> </html> さらに省略もできる <!DOCTYPE html> <html lang= ja > <title></title> </html> 25

26 空の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

27 わかりにくいので少し追加 <!DOCTYPE html> <html lang= ja > <head> <meta charset= utf-8 /> <title>ここにwebページのタイトルを書きます</title> </head> <body> <p>ここが本文でひとつの段落を意味します </p> </body> </html> 27

28 Head 要素文書のメタ情報を格納する Title 文書のタイトル Link 他の文書 (resource)との関係詳しくは次回以降 28

29 Body 要素文書の本文 h1, h2, h3,, h6 文書の見出し p 段落 ul 箇条書き 29

30 要素の記述要素をテキストで記述するタグで囲む開始タグと終了タグ <title> 文書のタイトル</title> <p> 段落の中身 <em> 強調文字列 </em> </p> <ul> <li>1 個目の項目 </li> <li>2 個目の項目 </li> </ul> 30

31 タグの記述入れ子になると木構造の子を指す <ul> <li>1 個目の項目 <ol> <li> 入れ子の1 番目の項目 </li> <li> 入れ子の2 番目の項目 </li> </ol> </li> <li>2 個目の項目 </li> </ul> 31

32 開始タグと終了タグ対応関係は明確に <p><em></p></em> というのはダメ <p><em>...</em></p> ならOK p 要素の下にem 要素がある 32

33 <!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

34 <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

35 Validator (3.4) The W3C Markup Validation Service XHTML/HTML 文書の妥当性検証コンピュータが解釈できる = エラー0 かを見る 35

36 HTMLは要素をmarkupする段落開始 ~ 終了 <p> 段落の最初と最後にタグが必要 </p> ( 間違い例 ) 段落の区切りにタグを使う<p> 次の段落 36

37 h1, h2, h3,, h6 文書の見出し section セクション p 段落 ul, ol Body 要素内の要素箇条書き(ul: 番号無し, ol: 番号あり) em, strong 強調 (em: 強調, strong: 最強調 ) 37

38 空要素マークアップすべきテキストのない要素 Hyper-Text Markup Language Markup: 注釈 ( 文書内での指示 ) meta: HTML 文書のメタ情報文書自体の説明など br: 改行 img: 画像の挿入 38

39 br 要素文字列の改行を表す段落とは無関係なので注意すること乱用しない <br /> 開始タグと終了タグをひとつで表したような物空要素を表現するタグ記述 39

40 block element と inline element - HTML5のコンテンツモデル( 一部 ) HTMLの要素 block 要素 inline 要素 body 直下には block 要素いきなりinline 要素は置けない inline 要素下 block 要素は置けない 40

41 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

42 flow content コンテントモデル - HTML5 一般的なテキスト本文のようなもの cf. sectioning content, heading content phrasing content 文書のテキスト( 段落内にあるもの) formatblock candidate 矩形領域で描画されようとするもの 42

43 blockquoteとq blockquote 長い引用ブロック q 短い引用文いずれも引用した文などを指す 43

44 Block 要素とinline 要素良い例 <body><p> 本文 </p></body> 悪い例 <body> 本文 </body> 良い例 <p><q>to be or not to be </q>という言説 </p> 悪い例 <p><blockquote> 引用文 </blockquote></p> 44

45 img 要素文書中に画像を挿入 ( 貼る)する写真イラスト罫線区切り装飾属性要素に細かい指示を与える挿入する画像 URL 画像が表示できない環境のための代替文字列 45

46 imgタグ <img src=../img/image01.jpg alt= とある写真 /> src 属性画像のありかを示すURL httpなどで始まるURL / から始まるホスト内絶対 path 相対 path alt 属性代替説明用文字列 46

47 src 属性 URL <img src= /> 絶対 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

48 alt 属性代替文字列画像の代わりに表示発音すべき文字列 <img src=... alt= タスマニアの風景写真 /> 音声読み上げブラウザ画像を見ない人にもスムーズなWeb 体験を 48

49 ハイパーリンク Hyperlink 他の文書へのポインタリンクアンカークリックなどで他の文書へ切り替わる領域 a 要素 href 属性 <a href= > 国際基督教大学 </a> 内容リンクアンカー( 文字列 ) 49

50 a 要素 URL <a href= >...</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

51 表 table element <table>...</table> 行と列 row and column Row 1: Row 2: Row 3: Column:

52 表 Row 1: Row 2: Row 3: Column: セル Rowは tr 要素 <tr>...</tr> 各セルは td 要素 <td>...</td> 52

53 Row 1: Row 2: Row 3: table 要素の基礎 Column: 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

54 セルの結合横方向の結合縦方向の結合セルの結合 <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

55 セルの結合横方向の結合縦方向の結合セルの結合 <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

56 セルの結合横方向の結合縦方向の結合複雑なtable 複雑な表も組めます <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

57 table : 表組み table element tr : 行 (row) td : セルデータ th : セル見出し (tdとは意味が異なるだけ) colspan, rowspan : セルの結合を指示する属性 57

58 今週のtableを書くときに link 要素 (1 行に続けて書いて良い) <link rel="stylesheet" type="text/css" href= /~ct13213/cs1/table2.css" /> head 要素に追記してください 58

59 意味付けと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

60 意味付けの要素 HTML5 section: セクション構造 article: 記事など footer: セクションのfooter nav: ナビゲーション要素 figure: 自己完結した図ビデオなど b: 注目を与える箇所 i: 異なったトーン性質の異なる箇所 small: 細則など補足的注釈 strong: 文章の重要度 60

61 適切な意味付け要素がないとき意味付けのないグループ化のための要素 div span 61

62 divとspan div ブロック的なグループ化 <div><ul>...</ul><ol>...</ol></div> span 行内でのグループ化 <p>...<span><strong>...</strong>...</spa n>...</p> 単なる容れ物 cssやjavascriptとの連携で用いる 62

63 要素に名前を id 属性文書内で唯一 (unique)の名前 <div id= sample01 >...</div> class 属性複数の要素に亘る名前付け <p>...<span class= red >...</span>...</p> <table class= red >...</table> 63

Web情報システム第1章～第5章

Web情報システム第1章～第5章 Web 情報システムマルチメディア情報通信ソフトウェア第 1 章 ~ 第 4 章 1 Web 情報システムマルチメディア情報の流通 Web 情報システム概論デジタルメディアの特徴デジタルメディアの記述 HTML (Hyper Text Markup Language) CSS (Cascading style sheet) デジタルメディアの制御 JavaScript コンピュータとネットワークの基礎

Web情報システム 第1章～第5章

Web情報システム第1章～第5章