情 報 公 開 システム 論 (2) 横 山 輝 明 講 師 神 戸 情 報 大 学 院 大 学 ytel@kic.ac.jp
電 子 文 書 としてのWebページ 2
ホームページ(1) ホームページ 自 由 に 作 成 安 価 世 界 中 に 公 開 多 彩 な 表 現 力 双 方 向 性 - 島 根 県 立 大 学 - 島 根 県 立 大 学 短 期 大 学 部 h7p://www.u- shimane.ac.jp/ 3
ホームページ(2) さまざまなサービス 双 方 向 性 の 利 用 表 現 力 の 向 上 CMSとしてシステム 化 チャット: KentWebチャットシステム h7p://www.kent- web.com/chat/sample/windy.cgi 掲 示 板 : h7p://www.2ch.net/ Wikipedia: h7p://a.wikipedia.org/ Mixi: h7p://www.mixi.jp 4
ホームページ(3) オンライン 専 業 のニュースサイト Gigazine: http://gigazine.net/ 5
ハイパーテキスト (1) ハイパーテキストとは 文 書 (テキスト) 間 に 意 味 や 連 想 などに 基 づいた 関 係 性 を 与 える 仕 組 みと 実 現 機 構 膨 大 な 文 書 情 報 処 理 のための 文 書 管 理 機 構 Memex (1945) 関 連 システム (1960~) WWW (1990) 一 次 元 的 な 紙 の 本 に 対 する 新 しい 文 書 の 提 案 例 : 百 科 事 典 の 注 釈 や 関 連 項 目 の 表 記 6
ハイパーテキスト (2) As We May Think (1945, Vannevar Bush) 夢 の 文 書 管 理 装 置 memex(memory Extension: 記 憶 拡 張 装 置 )の 構 想 を 提 案 マイクロフィルムやレコードの 管 理 装 置 データ 間 に 連 想 関 係 を 与 える h7p://www.theatlanwc.com/doc/194507/bush 7
ハイパーテキスト (3) Douglas Carl Engelbart マウスを 発 明 ハイパーテキストの 概 念 を 実 現 NLS (on- Line System)を 実 装 (1960 年 代 ) 文 書 管 理 システム 記 述 や 操 作 が 難 しく 利 用 は 広 がらなかった 8
ハイパーテキスト (4) Theodor Holm Nelson 1960 年 Project Xanaduを 開 始 ハイパーテキスト 機 構 の 実 現 プロジェクト 活 動 継 続 中 Xanadu 公 式 サイト: h7p://xanadu.com/ 1965 年 ハイパーテキスト という 言 葉 を 発 明 1968 年 HyperText EdiWng Systemを 提 案 Side- by- side connecwon as schemawcally illustrated in 1965 h7p://www.xanadu.com.au/ted/xusurvey/xudawon.html 9
余 談 : マルチメディア 1990 年 代 にパソコンマルチメディアブーム コンピュータの 進 化 が 背 景 マルチメディアとは 数 値 処 理 文 字 処 理 AV( 音 声 画 像 ビデオ) 処 理 を 加 えた 複 合 型 メディアのこと コンピュータ ソフトウェア ゲーム クリエイター 業 界 の 垣 根 を 越 えたコンテンツ 作 り 世 界 初 のCDROMドライブ 内 蔵 パソコン 富 士 通 FM- TOWNS 英 会 話 学 習 ゲーム EMIT 10
HTMLタグ 11 11
タグ: 基 本 ヘッダ 基 本 タグ <html> HTMLの 開 始 と 終 了 を 定 義 <head> ヘッダ 要 素 を 定 義 <body> ボディ 要 素 を 定 義 ヘッダ 関 連 <title> ページのタイトルを 定 義 <base> リンクのベースとなるパスを 定 義 <meta> HTML/XHTML 文 書 の 情 報 を 定 義 <link> 他 の 文 書 との 関 係 を 定 義 <style> 文 書 のスタイルを 定 義 12
タグ 例 : 基 本 ヘッダ HTMLヘッダ( 緑 ) head 部 とbody 部 の 指 定 ( 青 ) HTML 本 文 ( 白 ) <html> <head> <meta h7p- equiv="content- Type" content="text/html; charset=shij_jis" /> <Wtle> 情 報 公 開 システム 論 </Wtle> </head> <body> <h1>xhtmlとは</h1> <p>xhtmlとは </p> </body> </html> 13
タグ: 文 章 構 成 <h1>~<h6> 見 出 しを 定 義 <p> パラグラフ( 段 落 )を 定 義 <div> ディビジョン(1つのブロック)を 定 義 <span> テキストの 範 囲 を 指 定 ( 何 もしない) <br/> 強 制 改 行 <hr/> 罫 線 を 表 示 <pre> 改 行 スペース 等 を 保 ったまま 表 示 14
タグ 例 : 文 章 構 成 HTMLヘッダ + HTMLボディ (ヘッダ 部 省 略 ) <body> <h1>xhtmlとは1</h1> <h2>xhtmlとは2</h2> <h2>xhtmlとは3</h2> <p>こんな 感 じで 一 段 落 を 指 定 します </p> <p>さらに 続 けて もう 一 段 落 です </p> 改 行 したいときは <br> <hr> 仕 切 りの 罫 線 を 入 れてみました </body> 15
タグ: フォントスタイル <b> テキストをボールド 体 に 指 定 <big> フォントサイズを 大 きく 指 定 <i> テキストをイタリック 体 に 指 定 <small> フォントサイズを 小 さく 指 定 <sub> テキストを 下 付 きに 指 定 <sup> テキストを 上 付 きに 指 定 <tt> テレタイプ 文 字 に 指 定 16
タグ: リンク <img> 画 像 を 配 置 <a> ハイパーリンクを 定 義 17
タグ 例 : リンク 画 像 と 外 部 リンク src, href 属 性 にURLを 指 定 ( 赤 字 の 部 分 ) (ヘッダ 部 省 略 ) <body> 島 根 県 立 大 学 ロゴ <br> <img src="http://www.u-shimane.ac.jp/img/header/logo.gif" /> <br> 島 根 県 立 大 学 への <a href="http://www.u-shimane.ac.jp/">リンク</a> </body> 18
参 考 : 画 像 URLの 確 認 方 法 画 像 の 上 で 右 クリック プロパティ アドレス 欄 を 確 認 コピーペースト 19
タグ: リスト <ul> リスト 形 式 を 定 義 <ol> 番 号 付 きリストであることを 定 義 <li> リスト 形 式 の 各 リストを 定 義 <dl> 見 出 し 付 きリストであることを 定 義 <dt> リストの 見 出 しを 定 義 <dd> リストの 各 項 目 を 定 義 20
タグ 例 : リスト リスト 数 字 つきリスト ul, ol 項 目 は li で 指 定 <body> <ul> <li>リストa</li> リストAの 内 容 <li>リストb</li> リストBの 内 容 <li>リストc</li> リストCの 内 容 </ul> <ol> <li>リスト1</li> リスト1の 内 容 <li>リスト2</li> リスト2の 内 容 <li>リスト3</li> リスト3の 内 容 </ol> </body> 21
タグ: テーブル <table> テーブル( 表 )を 定 義 <caption> テーブルの 表 題 を 定 義 <tr> テーブルに 新 しい 行 を 定 義 <th> ヘッダセル( 項 目 名 のセル)を 定 義 <td> データセル( 通 常 のセル)を 定 義 <thead> テーブルのヘッダ 部 を 定 義 <tbody> テーブルのボディ 部 を 定 義 <tfoot> テーブルのフッタ 部 を 定 義 <colgroup> テーブルの 列 グループを 定 義 <col> 列 グループの 中 で 列 を 定 義 22
演 習 :HTMLの 作 成 23
演 習 目 的 HTML 利 用 のイメージをつかむ すること HTMLファイルの 作 成 HTMLファイルの 閲 覧 24
HTMLの 書 き 方 1 全 体 構 造 の 作 成 HTML 文 書 の 基 本 構 成 形 に 合 わせて 用 意 コピーでよい 2 文 書 の 追 加 文 書 を 書 き 加 える タグの 利 用 25
HTMLの 基 本 構 造 ヘッダ HTML 文 書 の 設 定 タグ データ 修 飾 入 れ 子 構 造 タグの 入 れ 子 <name>taro yamada</name> タグ 構 造 : 赤 字 がタグ 白 字 がデータ <users type="array"> <user> <id>99999</id> <name>taro yamada</name> </user> </users> 入 れ 子 構 造 : タグが 別 のタグの 中 に 入 る 入 れ 子 NG <user>teruaki<id>99999</user></id> <user>teruaki<id>99999</id> 入 れ 子 NG: タグが 閉 じる 前 に 別 のタグを 開 く 入 れ 子 NG: タグが 閉 じていない 26
HTMLの 構 成 HTMLヘッダ + HTMLボディ <html> <head> <Wtle> 情 報 公 開 システム 論 </Wtle> </head> <body> <h1>xhtmlとは</h1> <p>xhtmlとは </p> </body> </html> 27
HTML 記 述 の 注 意 タグの 取 り 扱 い タグ( 要 素 タイプ 名 属 性 名 )は 小 文 字 で 記 述 属 性 の 値 は 必 ず 引 用 符 で 囲 む <xxx property=" 属 性 値 "> 終 了 タグを 省 略 しない <xxx>~</xxx> <yyy /> & の 書 き 換 え & は & と 記 述 Q&A Q&A 28
課 題 テンプレート 基 本 的 な 形 準 備 titleタグ 内 を 書 き 換 えてみる bodyタグ 内 にHTMLタグを 書 く <html> <head> <Wtle> 情 報 公 開 システム 論 </Wtle> </head> <body> 好 きなことをここに 書 いてみる </body> </html> 29
課 題 : HTMLの 利 用 本 文 を 記 述 する bodyタグ 内 に 何 でもいいので 簡 単 な 文 書 を 書 く 自 己 紹 介 とか? 利 用 するタグ <h1>, <h2>, <p>, <br> <img> <a> <ul>か<ol>の 一 方 条 件 <h1>, <h2>, <p>, <br>は1つ 以 上 使 う 画 像 1つ 以 上 リストを1つ 以 上 リンクを1つ 以 上 ファイル 名 e 学 籍 番 号.html 例 : e123456.html 30
CSSについて 31 31
CSSとは Cascading Style Sheets の 略 Webページの 見 た 目 を 規 定 する 言 語 HTMLは 構 造 を 規 定 HTMLと 組 み 合 わせる 32
スタイルシートの 例 <html> <head> <title> 情 報 公 開 システム 論 </title> <style type="text/css"> H1 { color: red; } <style type="text/css">~</ style> 内 に 記 述 </style> </head> <body> 好 きなことをここに 書 いてみる </body> </html> 33
簡 単 なスタイルシート タグ への スタイル 指 定 タグ( 緑 )にスタイル( 赤 )を 指 定 複 数 のタグを 選 択 できる 複 数 のスタイルを 記 述 できる H1 { border- color: red; } H1 タグの border- color を red に 指 定 (=H1タグに 赤 枠 をつける) (タグ) { (スタイル): ( 指 定 ); (スタイル): ( 指 定 ); 複 数 個 を 並 べて 記 述 } 34
スタイルシート 命 令 色 フォントサイズ フォント 装 飾 マージン 枠 ( 無 数 に 存 在 ) 35
CSS: 色 の 指 定 color: 色 を 指 定 する /* 名 前 で 指 定 */ H1 { color: red; } /* 数 値 で 指 定 (16 進 数 )#RRGGBB */ H1 { color: #ff0000; } /* 数 値 で 指 定 (0~255)rgb(R, G, B) */ H1 { color: rgb(255, 0, 0); } /* 数 値 で 指 定 (0~100%) rgb(r, G, B) */ H1 { color: rgb(100%, 0%, 0%); } 36
CSS: フォントの 指 定 font-size: 文 字 の 大 きさを 指 定 する /* 名 前 で 指 定 */ BODY, TH, TD { font- size: large; } /* 数 値 で 指 定 */ BODY, TH, TD { font- size: 16pt; } /* 文 字 サイズを 指 定 するキーワード */ xx- small, x- small, small, medium, large, x- large, xx- large 37
長 さ 大 きさの 指 定 さまざまな 単 位 で 指 定 が 可 能 10em... 文 字 の 高 さを 基 準 とした1 文 字 分 の 長 さ 10px... 10ピクセル 10in... 10インチ(1in=2.54cm) 10cm... 10センチメートル(1cm=10mm) 10mm... 10ミリメートル(10mm=1cm) 10pt... 10ポイント(1pt=1/72in) 38
CSS: フォント 装 飾 text-decoration: 装 飾 の 指 定 文 字 の 飾 りつけ H1 { text- decorawon: blink; } underline( 下 線 ) overline( 上 線 ) line- through( 打 ち 消 し 線 ) blink( 点 滅 ) 39
CSS: 背 景 の 指 定 background-color: 背 景 色 を 指 定 する background-image: 背 景 画 像 の URLを 指 定 する /* 背 景 色 の 指 定 */ H1 { background- color: #ccccff; } /* 背 景 画 像 の 指 定 */ BODY { background- image: url(h7p://www.yyy.zzz/image/back.gif); } 40
CSS: 枠 の 指 定 border-color: 枠 の 色 border-width: 枠 の 太 さ border-style: 枠 の 線 H1 { border- color: red; border- width: 1px; border- style: solid; } none( 線 無 し) do7ed( 点 線 ) dashed( 粗 い 点 線 ) solid( 実 線 ) double( 二 重 線 ) groove( 谷 線 ) ridge( 山 線 ) inset( 内 線 ) outset( 外 線 ) 41
スタイルシートの 記 法 基 本 は タグ に 対 して スタイル を 指 定 タグ XHTMLのタグ( 図 中 の 緑 ) 複 数 指 定 も 可 能, (カンマ)で 区 切 る スタイル スタイル 指 定 ( 図 中 の 赤 ) (CSSキーワード): と ( 指 定 する 値 ); コロン(:)とセミコロン(;)に 注 意 H1 { border- color: red; border- width: 1px; border- style: solid; } スタイルシートの 指 定 例 (タグ) { /* コメント 欄 は 無 視 される*/ (スタイル): ( 指 定 ); (スタイル): ( 指 定 ); 複 数 個 を 並 べて 記 述 } スタイルシートの 記 法 42
スタイルシートの 埋 め 込 み (1) <html> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis" /> <title> 情 報 公 開 システム 論 </title> <style type="text/css"> H1 { color: red; } </style> <style type="text/css">~ </style> 内 に 記 述 </head> <body> 好 きなことをここに 書 いてみる </body> </html> 43
スタイルシートの 埋 め 込 み (2) <html> CSSを 外 部 ファイルにて 定 義 <head> 外 部 ファイルから 読 み 込 み <meta http-equiv="content-type" content="text/html; charset=shift_jis" /> <title> 情 報 公 開 システム 論 </title> <link rel="stylesheet" type="text/css" href="xxx.css"> </head> <body> 好 きなことをここに 書 いてみる </body> </html> CSSを 定 義 したファイル xxx.css CSSをここに 記 述 H1 { color: red; } 44
クラスやIDの 割 り 当 て クラス タグをグループ 化 する 仕 組 み 同 一 タグを 種 類 分 けしてデザインしたい 場 合 に 利 用 同 じH1でも 違 うデザインを 使 いたい ID タグに 名 前 をつける 仕 組 み ひとつひとつのタグを 区 別 して 扱 いたい 場 合 に 利 用 個 別 の 部 分 にデザインを 指 定 したい <h1 class="midashi1"> 見 出 しとして 扱 う!</h1> <h1 class="midashi2"> 見 出 しとして 扱 う!</h1> <h1 id="special">idで 名 前 をつけた!</h1> 同 じH1でも クラスやIDを 用 いることで 区 別 して 指 定 できる 45
div, spanタグ divとspanタグは 何 もしないタグ 文 章 中 で クラスやIDを 割 り 当 てるために 用 いる スタイルシートのために 用 いられる spanタグは 改 行 しない divタグはブロックとなる( 改 行 する) <span id="myname"> 横 山 輝 明 </span>です <br/> テストの<span class="keyword"> 文 章 </span>です このようにして 文 章 を <span class="keyword"> 記 述 </span>している 途 中 で 一 部 をdivタグや spanタグで 囲 んでクラスやIDを 指 定 することができます クラスやIDで 場 所 指 定 してスタイルシートを 指 定 するために 用 いられます 46
クラスやIDの 指 定 クラス: タグ 名 に. (ドット)で 続 けて 指 定 ID: タグ 名 に # で 続 けて 指 定 H1.midashi { border- color: red; } H1タグのmidashiクラスすべて.midashi { border- color: red; } タグを 制 限 せずに 指 定 (midashiクラスすべて) H1#myname { border- color: red; } H1タグのmyname IDすべて #myname { border- color: red; } タグを 制 限 せずに 指 定 (myname IDすべて) 47
スタイルシートの 利 点 見 た 目 と 構 造 を 分 離 できる 見 た 目 を 一 度 に 指 定 できる 見 た 目 を 一 度 に 変 更 できる 好 きな 見 た 目 に 変 更 できる 48
参 考 サイト 検 索 してみる css 入 門 など とほほのスタイルシート 入 門 http://www.tohoho-web.com/css/index.htm http://www.tohoho-web.com/css/reference.htm - とほほのWWW 入 門 http://www.tohoho-web.com/www.htm 49
演 習 :CSSの 追 加 50
演 習 目 的 CSS 利 用 のイメージをつかむ すること HTMLファイルへのCSS 追 加 HTMLファイルの 閲 覧 51
スタイルシートの 追 加 (1) HTMLヘッダ 内 に 直 接 記 述 <html> <head> <title> 情 報 公 開 システム 論 </title> <style type="text/css"> H1 { color: red; } <style type="text/css">~</ style> 内 に 記 述 </style> </head> <body> 好 きなことをここに 書 いてみる </body> </html> 52
スタイルシートの 追 加 (2) 外 部 ファイルで 指 定.css ファイルを 作 成 ファイルの 中 にCSSを 記 述 <html> <head> <title> 情 報 公 開 システム 論 </title> <link rel="stylesheet" href="default.css" type="text/css" /> </head> <body> 好 きなことをここに 書 いてみる </body> </html> H1 { color: red; } <style type="text/css">~</ style> 内 に 記 述 default.css ファイル ファイル 内 にCSSの 指 定 を 記 述 53
課 題 : CSSの 追 加 利 用 CSSの 追 加 先 ほどのHTMLファイルにCSSでデザイン 追 加 文 字 サイズ 色 背 景 などを 指 定 余 裕 があればCLASS, IDを 指 定 ファイル 名 e 学 籍 番 号.html 例 : e123456.html e 学 籍 番 号.css 例 : e123456.css 提 出 tel1203@gmail.com へメール タイトル: 情 報 公 開 システム 論 HTML 宛 先 ファイル 名 タイトル 厳 守 本 文 には 感 想 やコメントなども 任 意 でどうぞ 54
WWWとWebページ 55
インターネットの 特 徴 自 由 に 利 用 可 能 な 通 信 基 盤 通 信 と サービス が 分 離 インターネットは 通 信 のみ 提 供 サービス は 自 由 に 作 成 できる 56
インターネットとWWW インターネット 世 界 中 に 普 及 した 通 信 基 盤 WWW インターネット 上 の 情 報 公 開 システム WWWコンテンツ WWW 上 で 提 供 されるコンテンツ 動 的 なサービスも 提 供 される コンテンツ WWW インターネット 57
インターネット 時 代 の 幕 開 け Windows 95 (1995/11/23) インターネットプロトコル 内 蔵 ブラウザは 含 まず Internet Explorer 1.0 ブラウザ 追 加 ダウンロードして 利 用 WWWの 一 般 化 58
Webページ 表 現 力 の 変 遷 Yahoo!トップページ (1994) Yahoo!トップページ (2000) Yahoo!トップページ (2008) 画 像 動 画 Flashの 導 入 HTMLの 表 現 力 向 上 Yahoo!トップページ (1995) Images: Yahoo's steady home page transformation http://news.cnet.com/2300-1032_3-6072801-1.html?tag=mncol 59
WWWの 歴 史 1989/3 T.B- LeeがWWWのアイデアを 提 案 InformaWon Management: A Proposal 1990/11 WWW 誕 生 WorldWideWeb: Proposal for a HyperText Project, T.B- Lee 欧 州 原 子 核 研 究 機 構 (CERN)の 膨 大 な 文 書 管 理 のため 1991/8 WWW 公 開 を 広 報 1992/9 日 本 初 のWebページ 1992 Mosaicの 誕 生, Netscape 1992 W3C 設 立 CSS HTMLやXML 拡 張 の 規 格 の 標 準 化 推 進 団 体 60
HyperTextの 実 現 Tim Berners- Lee 欧 州 原 子 核 研 究 機 構 (CERN)の 膨 大 な 文 書 管 理 を 目 的 InformaWon Management: A Proposal (1989/3) WWWの 基 本 的 なアイデア HyperTextを 実 装 WorldWideWeb: Proposal for a HyperText Project (1990/11) 1991/8 WWWシステムを 公 開 h7p://groups.google.com/group/alt.hypertext/msg/ 395f282a67a1916c 61
世 界 最 初 のWebページ I promised to post a short summary of the WorldWideWeb project. Mail me with any queries. WorldWideWeb - Executive Summary The WWW project merges the techniques of information retrieval and hypertext to make an easy but powerful global information system. The project started with the philosophy that much academic information should be freely available to anyone. It aims to allow information sharing within internationally dispersed teams, and the dissemination of information by support groups. 1992/11/3 時 点 のCERN Webページ 欧 州 核 物 理 研 究 機 構 スイスジュネーブ 1991/8/7にTim Berners-Leeが ネットニュースへ 投 稿 したメッセージ 出 典 : http://www.w3.org/history/19921103-hypertext/hypertext/www/theproject.html 62
WWWのHyperText 構 造 HyperText 構 造 : 文 書 と 文 書 の 関 係 性 WWW 文 書 構 造 HTMLで 記 述 された 文 書 他 文 書 への 参 照 をハイパーリンクとして 設 定 文 書 (HTMLで 記 述 された 文 書 ) アンカー アンカー 文 書 (HTMLで 記 述 された 文 書 ) 文 書 ( 文 書 内 に 被 リンク 箇 所 を 持 つ 場 合 もある) フラグメント 箇 所 63
World Wide Web 世 界 規 模 の 文 書 共 有 システム HyperText 文 書 世 界 中 の 文 書 間 でのリンク 構 造 最 も 一 般 的 なインターネットアプリケーション 情 報 公 開 /コミュニケーション/ 商 用 利 用 などさま ざまなアプリケーションが 登 場 巨 大 なアプリケーションプラットホームへと 変 化 64
WWWの 三 大 要 素 URI: 住 所 の 記 載 方 法 HTTP: データのやりとりの 方 法 HTML: Webページの 記 述 言 語 65
URI 書 式 スキーム 部 対 象 リソースへのアクセス 手 段 WWWではhttp/https (ファイル 取 得 ではftpが 利 用 されることも) リソース 部 対 象 リソースの 識 別 子 WWWではHTML 文 書 HTML 文 書 を 格 納 するサーバの 所 在 とサーバ 内 のファイル 格 納 場 所 スキーム 部 リソース 部 http : //www.cyber-u.ac.jp/faculty/it/index.html ホスト 所 在 (FQDNからIPアドレス) ファイルパス 66
HTTP Webサーバとブラウザ 間 での 通 信 プロトコル HyperText Transfer Protocol HTML 文 書 やその 他 のファイル 伝 送 に 利 用 通 信 形 態 クライアントサーバ 型 リクエストレスポンス 型 RFC 2616 67
HTTP 機 構 HTTP 特 徴 リクエスト&レスポンス クライアントとサーバで 異 なる 機 能 を 提 供 <HTML> <TITLE> 自 己 紹 介 </TITLE> <BODY> <H1> 名 前 </H1> <P> 横 山 輝 明 </P> <H1> 挨 拶 </H1> <P> みなさん こんにちは <A HREF="ht t p: //www. cyber - u. ac. j p/"> サイバー 大 学 </A> の 横 山です </P> </BODY> </HTML> 2 格 納 HTMLファイルの 取 出 4 取 得 HTMLファイルの 表 示 1 HTTPリクエストの 送 信 3 HTTPレスポンスの 送 信 インターネット Webサーバ ブラウザ (Webクライアント) 68
HTML HTMLとは Webページを 記 述 するためのマークアップ 言 語 W3Cが 規 格 策 定 最 新 版 はHTML 4.01 HTMLの 特 徴 文 書 の 論 理 構 造 や 見 栄 えなどを 記 述 文 書 中 に 画 像 や 音 声 などを 配 置 できる 他 の 文 書 へのハイパーリンクを 設 定 できる 69
HTML 構 文 WWWの 文 書 記 述 記 法 タグと 呼 ばれる 命 令 文 < > で 囲 まれた 命 令 文 <( 開 始 タグ)> </( 終 了 タグ)> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html lang="ja" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <meta name="keywords" content="サイバー 大 学,サイバー,CU,インターネット 大 学, 吉 村 作 治, 吉 村 教 授, 世 界 遺 産 学 部, 世 界 遺 産,エジプト,IT 総 合 学 部,ソフトバンク,ソ フトバンクのインターネット 大 学,オンデマンド, 動 画, 大 学, 教 育, 学 部, 講 座 "> <meta name="description" content="サイバー 大 学 インターネットを 使 って 学 ぶ 日 本 で 初 めての 大 学 2007 年 4 月 開 学 "> <title>it 総 合 学 部 サイバー 大 学 </title> 70
HTMLの 例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/ html4/loose.dtd"> <html lang="ja" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <meta name="keywords" content="サイバー 大 学,サイバー,CU,インターネット 大 学, 吉 村 作 治, 吉 村 教 授, 世 界 遺 産 学 部, 世 界 遺 産,エジプト,IT 総 合 学 部,ソフトバンク,ソフトバンクのインターネット 大 学,オンデ マンド, 動 画, 大 学, 教 育, 学 部, 講 座 "> <meta name="description" content="サイバー 大 学 インターネットを 使 って 学 ぶ 日 本 で 初 めての 大 学 2007 年 4 月 開 学 "> <title>サイバー 大 学 </title> <link rel="shortcut icon" href="/favicon.ico"> <link rel="start" href="/index.html" title="ホーム"> <link rel="contents" href="/sitemap/index.html" title="サイトマップ"> <link rel="stylesheet" href="/shared/css/common.css" type="text/css" media="screen,tv,projection"> <link rel="stylesheet" href="/shared/css/print.css" type="text/css" media="print"> <link rel="alternate stylesheet" href="/shared/css/fontsize_small.css" type="text/css" media="all" class="fontsize" タグと id="fontsize-small" 呼 ばれる 命 令 title=" と 本 文 字 サイズ: 小 "> <link rel="stylesheet" href="/shared/css/fontsize_medium.css" type="text/css" media="all" class="fontsize" id="fontsize-medium" 表 示 される 以 title=" 外 にも 文 字 サイズ: 大 量 の 標 準 情 "> 報 <link rel="alternate stylesheet" href="/shared/css/fontsize_large.css" type="text/css" media="all" class="fontsize" id="fontsize-large" title=" 文 字 サイズ: 大 "> もともとは 論 理 構 造 の 記 述 71
HTMLのレンダリング <HTML> <TITLE> 自 己 紹 介 </TITLE> <BODY> <H1> 名 前 </H1> <P> 横 山 輝 明 </P> <H1> 挨 拶 </H1> <P> みなさん こんにちは <A HREF="http://www.cyber-u.ac.jp/"> サイバー 大 学 </A> の 横 山 です </P> </BODY> </HTML> HTMLの 特 徴 テキストファイル タグの 入 れ 子 構 造 冗 長 意 味 構 造 のみを 記 述 体 裁 は 別 途 CSS (Cascading Style Sheet)で 指 定 見 出 し リンクなど 簡 単 なHTMLファイルの 例 ブラウザ 出 力 例 72
初 期 のWebページ 73
デザインの 分 離 CSS (Cascading Style Sheets) HTML 要 素 のデザイン 指 定 レイアウト 文 字 種 類 サイズ 色 などの 装 飾 を 指 定 W3Cが 標 準 化 CSS 2.1が 提 案 (2008 年 現 在 ) CSSの 利 点 HTMLと 独 立 したデザイン 指 定 CSSを 切 り 替 えることで 多 機 種 多 環 境 へ 対 応 デザインとコンテンツの 分 業 <div id="id">テストの 文 字 列 </div> <div class="class">テストの 文 字 列 </div> HTMLタグでのid, class 指 定 p#id { color: #ff3300; font-size: 24px } pタグのid= id を 持 つタグの 装 飾 指 定 74
スタイルシート 例 75
WWW 現 在 もっとも 普 及 したハイパーテキスト 実 装 ハイパーテキスト 機 能 の 簡 単 な 実 装 Webページとリンク ユーザーに 文 書 の 格 納 場 所 を 意 識 させない サーバクライアントモデルでの 文 書 管 理 WWWを 支 える 技 術 サーバクライアントの 通 信 モデル URI, HTTP, HTML 76
WWWの 三 大 要 素 URI 文 書 などの 情 報 の 場 所 を 表 す 表 記 法 HTTP 文 書 などの 情 報 を 転 送 する 通 信 プロトコル HTML 文 書 を 記 述 するための 表 記 法 簡 単 なハイパーテキスト 構 造 を 持 つ 77
Trojan room Coffee- Pot コーヒー 残 量 確 認 サービス 英 ケンブリッジ 大 学 コンピュータ 研 究 所 内 の コーヒーポットの 残 量 表 示 WWW 最 初 期 のWebカメラアプ リケーション 1993 年 ~2001 年 h7p://www.cl.cam.ac.uk/coffee/ coffee.html 78
ファイル 公 開 の 方 法 79
インターネットとWWW インターネット 世 界 中 に 普 及 した 通 信 基 盤 WWW インターネット 上 の 情 報 公 開 システム WWWコンテンツ WWW 上 で 提 供 されるコンテンツ 動 的 なサービスも 提 供 される コンテンツ WWW インターネット 80
HTTP 機 構 HTTP 特 徴 リクエスト&レスポンス クライアントとサーバで 異 なる 機 能 を 提 供 <HTML> <TITLE> 自 己 紹 介 </TITLE> <BODY> <H1> 名 前 </H1> <P> 横 山 輝 明 </P> <H1> 挨 拶 </H1> <P> みなさん こんにちは <A HREF="ht t p: //www. cyber - u. ac. j p/"> サイバー 大 学 </A> の 横 山です </P> </BODY> </HTML> 2 格 納 HTMLファイルの 取 出 4 取 得 HTMLファイルの 表 示 1 HTTPリクエストの 送 信 3 HTTPレスポンスの 送 信 インターネット Webサーバ ブラウザ (Webクライアント) 81
FTP 概 要 FTP 概 要 FTPはファイル 転 送 のツール Webサーバへのファイル 転 送 に 利 用 インターネット Webサーバ ファイル 転 送 <HTML> <TITLE> 自 己 紹 介 </TITLE> <BODY> <H1> 名 前 </H1> <P> 横 山 輝 明 </P> <H1> 挨 拶 </H1> <P> みなさん こんにちは <A HREF="ht t p: //www. cyber - u. ac. j p/"> サイバー 大 学 </A> の 横 山です </P> </BODY> </HTML> ブラウザ (Webクライアント) 公 開 するファイルを 準 備 して Webサーバに 転 送 する ( 転 送 にjpを 利 用 ) 82
FTPクライアント FTPのファイル 転 送 するソフトウェア さまざまなものが 存 在 今 回 はFFFTPを 使 う sourceforge に 最 新 版 h7p://sourceforge.jp/projects/ffjp/ 83
FFFTPの 利 用 イメージ 手 元 のパソコンの 中 ファイルを 相 互 に 転 送 する ネットワーク 上 の コンピュータの 中 84
FTP 設 定 サーバ (ホスト 名 ): www.cyber-u.info ユーザアカウント (ユーザー 名 ):shimane (パスワード): ( 口 頭 で 伝 える) アップロード 場 所 ( 右 側 のサーバ 領 域 ) 後 で 説 明 する クイック 接 続 で サーバへの 接 続 を 開 始 する 85
演 習 :アップロード 86
演 習 :アップロード アップロードする FFFTPを 利 用 public_html 内 にグループのディレクトリを 作 成 そのディレクトリ 内 にファイルをアップロード 閲 覧 する h7p://www.cyber- u.info/~shimane/ PC 携 帯 から 他 グループのページも 閲 覧 する 87