情報コミュニケーション入門ｂ 第１０回 Web入門（１） 2010.06.30 情報コミュニケーション入門ｂ 第１０回 Web入門（１） 坂口利裕
本日のテーマ メインテーマ 教科書指定テキスト関連部分 Webによる情報発信 ３. ネットワークによるコミュニケーション 情報コミュニケーション入門ｂ 2010.06.30 本日のテーマ メインテーマ Webによる情報発信 教科書指定テキスト関連部分 ３. ネットワークによるコミュニケーション 2010.06.30 情報コミュニケーション入門ｂ 坂口利裕
Webページとホームページ 一連の文書グループ（プレゼンテーション）の起点となる文書＝ホームページ 独立したそれぞれの文書＝Webページ 情報コミュニケーション入門ｂ 2010.06.30 Webページとホームページ 文書中に埋め込まれたアンカー リンク 一連の文書グループ（プレゼンテーション）の起点となる文書＝ホームページ 独立したそれぞれの文書＝Webページ 2010.06.30 情報コミュニケーション入門ｂ 坂口利裕
Webによるプレゼンテーション技法 Webページによる情報発信 Webページ作成の体験学習 Webの仕組みと情報発信の理解 ページの記述の仕組み リンクによるページ間の関連付け 画像の埋め込み フレーム構造を用いたプレゼンテーション作成 2010.06.30 情報コミュニケーション入門ｂ
Webページによる情報発信 ネットワークを利用した双方向の通信 本学の教育用システムでは学内に限って公開可能 誰もが情報の発信者となれる 情報発信の練習の場の提供 セキュリティ管理の十分なスキルが必要 2010.06.30 情報コミュニケーション入門ｂ
Webページ実現の仕組み（１） クライアントとサーバとの連係 サーバはクライアントから要求される指令に基づき，ネットワークにデータを送信する クライアントは送られてきたデータに基づき，文書・画像を再生する 2010.06.30 情報コミュニケーション入門ｂ
World Wide Webの仕組み Web サーバー Web/DNS クライアント DNS サーバー 入力 表示 情報コミュニケーション入門ｂ 2010.06.30 World Wide Webの仕組み Web サーバー Web/DNS クライアント DNS サーバー １．クライアントのブラウザ・ソフトに http://www.yokohama-cu.ac.jp/index.html を指示する 入力 ２．ブラウザ・ソフトはDNSサーバーに問い合わせて， ホストwww.yokohama-cu.ac.jpに対応するIPアドレスを得る ホスト名→IPアドレスに変換 ブラウザ・ソフト サーバー・ソフト ３．ブラウザ・ソフトはIPアドレスを使って，サーバーに 接続し，index.htmlというデータの送信を要求する ５．ブラウザ・ソフトは受信したデータの内容に基づいて情報を表示する 表示 ４．サーバー・ソフトは要求されたデータを発信元に送り返す index.html www.yokohama-cu.ac.jp 坂口利裕
Webページ実現の仕組み（２） データの要求手順やデータの受取手順の規格化 規格化された手順（プロトコル）に従えば，どのクライアントとどのサーバとでも通信が可能 使用されるプロトコル ハードウェア層： TCP（Transmission Control Protocol） / （over） IP（Internet Protocol） ソフトウェア層： HTTP （ Hyper Text Transfer Protocol） 2010.06.30 情報コミュニケーション入門ｂ
Webページ実現の仕組み（３） ページ内容の表現の規格化 文書（文字の大きさ・レイアウト・箇条書き）・表の表記・画像の組込みの指示 情報コミュニケーション入門ｂ 2010.06.30 Webページ実現の仕組み（３） ページ内容の表現の規格化 文書（文字の大きさ・レイアウト・箇条書き）・表の表記・画像の組込みの指示 アンカー（クリックすると関連付けられたWebページへ移動させるためのボタン）の指示 ページ内容は文字で表記→表現方法の規約＝HTML（Hyper-Text Mark-up Language） 2010.06.30 情報コミュニケーション入門ｂ 坂口利裕
HTML文書の基本（１） 通常の文字情報に，レイアウト・書式や表組・画像・アンカーの指示を行うためのタグを埋め込む。 タグのパターン 機能を表す名前（タグ名）を<と>で挟む 範囲を示す機能は<タグ名>と</タグ名>で開始と終了を示す 例：<b>文字をボールド体にする</b> 場所を示す機能は<タグ名>のみで示す 例：<br> （強制改行） オプション機能は，<>内のタグ名に続けて，オプション名=“オプションの内容”で示す 2010.06.30 情報コミュニケーション入門ｂ
HTML文書の基本（２） 必須のタグ よく利用されるタグ <HTML> … </HTML> HTML文書 <BODY> … </BODY> HTML文書本文 よく利用されるタグ <HEAD> … </HEAD> ヘッダ部 （文書タイトルなど） <Hn> … </Hn> 見出しの指定。nは数字(1～6) <IMG SRC=“…”> 画像の埋め込み <A HREF=“…”> … </A> アンカーの設定 2010.06.30 情報コミュニケーション入門ｂ
HTML文書の基本（３） 文字情報は，そのまま表示される <や>は，特別な表記で示す 半角文字の空白，改行文字は無視され，間は（１文字に）詰めて表示される 例： <や>は，特別な表記で示す < → < > → > & → & 半角カナ文字，機種依存文字は使用しない ○つき数字①②，ローマ数字ⅠⅡなど→極力使用しない！ 行を 変えても 詰められる 行を変えても詰められる 2010.06.30 情報コミュニケーション入門ｂ
HTML文書の作り方 テキストエディタ（メモ帳など）を用いる 高価なソフトウェアを必要とせずとりあえず始められる 最小限のデータですむので，データ量が少なくてすむ HTMLの知識が必要 専用エディタ（Front Page（Microsoft）・ホームページビルダー（IBM）など）やワープロソフトなどのHTML変換機能を用いる ワープロ感覚で編集が可能 既存の文書を再利用できる 内容が特定の環境に依存しすぎたり，冗長な情報が入るためにデータ量が多くなる 2010.06.30 情報コミュニケーション入門ｂ
Webページの連係 アンカータグによって指定 情報コミュニケーション入門ｂ 2010.06.30 Webページの連係 アンカータグによって指定 <a href=“参照先”>アンカーを示す文字列やimgタグによる画像の指定</a> 参照先の指示 URL： http://www.yokohama-cu.ac.jp/ など 相対参照：（その文書と同じフォルダが起点） nextpage.html など 絶対参照：（サーバー内のトップページが起点） /top/other.html など 2010.06.30 情報コミュニケーション入門ｂ 坂口利裕
練習８ 教科書p.68～76の「例題（１）」にしたがいHTML文書を作成 次回予定の練習９と合わせて提出 必須タグの表記 文字情報の表記 情報コミュニケーション入門ｂ 2010.06.30 練習８ 教科書p.68～76の「例題（１）」にしたがいHTML文書を作成 必須タグの表記 文字情報の表記 文字の書式の表記 段落の書式の表記 Webページ相互の関連付け（アンカーの表記） 次回予定の練習９と合わせて提出 提出の手順も次回説明 2010.06.30 情報コミュニケーション入門ｂ 坂口利裕