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