基礎情報処理Ⅱ/情報システム入門B 第9回

(1)

情報システム入門B

第6回

(2)

2

サーバ

サーバ送り手

(3)

コンピュータネットワークとは？

• 伝送路 • 交換機 • 回線終端装置（モデム） • 端末（コンピュータ）  有機的な情報の交換端末ネットワーク_カード交換機交換機ネットワーク_カード端末伝送路

(4)

4

通信とプロトコル

• コンピュータ間でデータをやりとりする際の様々な決まりごと（例． TCP/IP，HTTP，POP,...等） – コンピュータ同士の通信手順は予め細かく定めておかなければならない • メールの送受信で用いられるプロトコル

➢ SMTP（Simple Mail Transfer Protocol) ➢ POP(Post Office Protocol)

➢ IMAP（Internet Message Access Protocol)

• ウェブで用いられるプロトコル

– HTTP – TCP/IP

(5)

ＯＳＩ参照モデル

• 類似した機能は同一の層に集める。 • 実行される処理を構成する概念やその実現に必要な技術の点で明らかに異なる機能を扱う場合には別の層を設定する。 • 各層について，その隣接上位下位の層との間にだけインターフェイスを設定する。

(6)

OSI参照モデル

アプリケーション層アプリケーションに対応するプロトコルを定める。プレゼンテーション層データ形式の管理・圧縮・暗号化などを行うプロトコルを定める。セッション層通信を開始・終了する際のプロトコルを定める。トランスポート層通信の信頼性を確保するためのプロトコルを定めている。ネットワーク層通信経路の選択などを行うプロトコルを定める。データリンク層誤り検出などを行うプロトコルを定める。物理層 _{電気・物理レベルのプロトコルを定めていう。コネク} タや電気信号についての規定が含まれる。 6

(7)

インターネットのプロトコルTCP/IP

アプリケーション層第7層（応用層）意味内容（応用層）第6層（プレゼンテーション層）データ形式の変換（プレゼンテーション層）第5層（セッション層）会話の制御（セッション層）トランスポート層（TCP) 第4層：トランスポート層データ転送制御トランスポート層インターネット層（IP) 第3層：ネットワーク層端末間ネットワーク層端末間ネットワーク層

(8)

8

ＬＡＮ（Ｌｏｃａｌ Area Network)

• 限られたエリアのネットワーク – 大学，会社，家庭 • ＬＡＮは利用者が管理する。 • 伝送速度が高速ＷＳＰＣＷＳＰＣ終端終端

(9)

ＬＡＮの機能

ＬＡＮの機能 • 電子メールの交換 • ファイルの転送 • サービスの共有 – プリンタ – データベース – ソフトウェア – グループウェア • 分散処理伝送媒体 • ツイストベアケーブル • 同軸ケーブル • 光ファイバケーブル • 無線

(10)

10

ＬＡＮの形状

ＨＵＢ

リング型

(11)

ネットワークにおけるデータ交換

• 回線交換方式 – 通信するコンピュータ間に専用回線を確保する方式。 – 動画，音声の配信に適している。 • パケット交換方式 – データをパケットに小分けする。 – 回線上に様々なパケットが混在できる。

(12)

12

ＭＡＣアドレスとIPアドレス

MACアドレス • ネットワーク上の機器には，製造メーカーによってMAC アドレスという番号が付けられている。 • MACアドレスは，コンピュータが発信する電気信号の宛先となる。 IPアドレス • ネットワーク上の位置はIP アドレスで区別される。 • IPアドレスはハードウェア固有のものではなく，ネットワークに接続した機器に対してつけられる番号。

(13)

IPアドレスの仕組み

• IPアドレスはネットワーク上の電話番号にあたる。 • IPアドレスは32ビット（Ipｖ４）から128ビット (IPv6） – 例）「127.0.0.1」 • IPアドレスのうち – 前半がネットワーク部

(14)

グローバルIPとプライベートIP

グローバルIP プライベートIP • インターネットに接続するための公的なIPアドレス • プロバイダー（ISP)によって割り当てられる • 大学などの組織は独自の IPを取得する。 • ローカルエリア内で自由に割り当ててよいIPアドレス • ネットワーク管理者が各機器に割り当てる • プライベートアドレス宛てのパケットはネットワーク外部には流さない

(15)

(16)

16

インターネットとWAN

• インターネットは，LANをルータという装置で相互に接続したネットワーク。

(17)

通信速度の計算

• 通信速度はbpsという単位で表す。 • 例）40Mbps（Mega bit per second)

1秒間に40Mbitのデータを受信できる

• CD1枚は640MB（Mega Byte）

➢CD1枚分のデータを受信するのにどれくらいの時間がかかるか？

(18)

18

インターネットの歴史

1969 ARPAnet開始（～1990）

1989 CERN（ヨーロッパ素粒子物理学研究所）のTim Berners-LeeがWorld Wide Webの仕様を考案．

1992 日本初の商用ISP．日本初のWebぺージ登場． 1993 NCSAがMosaicを公開．日本でIIJによるIP接続サービスが開始 1994 W3C発足 1999 iモード開始 2000 フレッツISDN開始

(19)

インターネットの仕組み

• Web＝World Wide Web

– HTML（情報を記述する形式[言語]）

• HyperText Markup Language

– HTTP（プロトコル）

• HyperText Transfer Protocol

– URI[URL]（情報の在処）

• Uniform Resource Identifier (Locator)

(20)

WEBの仕組み

20

• Web＝World Wide Web

– HTML（情報を記述する形式[言語]）

• HyperText Markup Language

– HTTP（プロトコル）

• HyperText Transfer Protocol

– URI[URL]（情報の在処）

• Uniform Resource Identifier (Locator)

– CGI(双方向の通信）

(21)

WEBの通信手順としてのHTTP

• Hyper Text Transfer Protocolの手順

1. ウェブブラウザが，ウェブサーバーに接続し，「何が欲しいか」（GET URL HTTP/バージョン）を伝える。 2. ウェブサーバーがリクエストに答えてデータを返す。

(22)

URLの見方

http://www.example.co.jp/sample/data.html ホスト所在地ホストのディレクトリ構造主なドメインの種類（日本ネットワークインフォメーションセンター）

(23)

インターネットの設計思想

• 「すべての人に情報を!!」 – 情報を独占させない – 中心制御機構を持たないネットワーク • オープン・アーキテクチャー – ソフトフェアは無償で開発・提供 – 『伽藍とバザール』

(24)

HTML入門

(25)

HTMLとはなにか？

• WWW ページの特徴であるハイパーリンクの機構を提供し，ハイパーテキストを記述する

• 基本的にテキストであり，それにブラウザなどのための処理符号をテキストで書き込む

(26)

(27)

HTMLでなにができる？

• 見出し、テキスト、表、リスト、写真などのあるオンライン文書を出版する • ハイパーテキストリンクを通じ、オンライン情報をボタンのクリックで取得する • 情報検索、予約、商品の注文などの遠隔サービスのトランザクションに用いるフォームを設計する • 表計算シートやビデオクリップ、音声クリップ、その他のアプリケーションを、文書に直接埋めこむ

(28)

28

HTMLの本来の役割

• 内容と表示の指定を切り離し，内容の記述にのみかかわる – デザインはCSSで行うのが正式 • 文章中の構成要素として何であるのをしめす

(29)

次世代HTMLとしてのHTML5

• 現在のWeb標準準拠は「HTML5＋CSS」 • HTML5は，下位互換。

(30)

30

HTMLの基本

• タグは＜ｈｏｇｅ＞．．．＜/hoge＞のように対になっている • タグで囲まれた部分は，どのような情報があるかを示している • タグには，属性としてさらに細かい設定を書き込むことができる • Webページの本文は＜body＞．．．＜/body＞で囲まれた部分に書く • ＜head＞．．．＜/head＞で囲まれた部分は文章全体に関する情報を書き込む • その他にも，スラッシュタグがなく単独で用いるタグもある

(31)

タグの書き方まとめ

＜tag attribute = "

値

">…</tag>

• タグは小文字で書く

• 閉じるタグ(スラッシュタグ)は省略しない

• 属性の値は""で囲む

• タグの入れ子を崩さない

(32)

32

CSSによるウェブサイトの装飾

• カスケーディング・スタイルシート（CSS）は、 HTML文書の見た目を詳しく記述する． • 本来HTMLは文書の構造だけを定義すべきもの． • HTMLで用いられていた機能のうちのいくつかは、スタイルシートで記述することを推奨されている．

(33)

CSSの使い方

• CSSは「属性」と「値」という2つの要素の組み合わせ

属性：値；

• CSSの使い方には3種類ある 1. タグに属性として記述する 2. ページのヘッダ部分に記述する

(34)

34

今日の作業

• プリントのタグを打ち込んでホームページを作ってみよう

(35)

最初にやること

• htmlファイルの保存場所を作る – ネットワーク・ドライブ（Z：）に「html」というフォルダをつくる • テキストエディタのTeraPadを起動する – スタートメニュー＞TeraPad • 「page1.html」という名前で保存する – ファイル名は必ず半角英数字でつける

(36)

(37)

(38)

38

(39)

ページに文章を書く

(40)

40

HTMLファイルをブラウザで表示する

• ブラウザを立ち上げる

• ファイル＞開く＞参照＞．．．でファイルの場所を指定して開く

(41)

(42)

42

• 見出しは＜ｈ１＞～＜ｈ６＞まであり，＜ｈ１＞が一番大きな文字になる．

• 見出しを設定すると，その部分は大きく表示される

(43)

(44)

(45)

HTMLによる文字の装飾

HTMLによる装飾 • 太字 <b>・・・</b> • 斜体 <i>・・・</i> • 大きく <big>・・・</big> • 小さく <small>・・・</small> • 色の変更 – <font color=“hoge”>・・・ <font> HTMLによるデザインは現在では推奨されていない．

(46)

(47)

(48)

48

CSSによるテキストの装飾

• ファイルのヘッダ部分にCSSを書き込むことで，装飾を行う． • <style> </style>というタグの間に次のように書く <style type=“text/css”></style>

(49)

(50)

50

フォントの装飾をするCSS

• 大きさ font-size:□px; • 色 color:color name;□; • 太字 font-weight:bold; • 斜体 font-style:italic; • 下線 text-decoration:underline; • 文字の点滅 text-decoration:blink

(51)

体裁を整える

• 区切り線を入れる • リンクを張る

(52)

52

(53)

リンクを張る

• リンク機能を用いて，ページとページをつなげる • 使用するタグは

(54)

54

リンク先の指定方法

• インターネット上のホームページを指定する場合

– <a href=“http://hogehoge.com”>

• 自分の作った他のページを指定する場合

(55)

• ネット上の他のページを指定する場合 <a href = "http://～">リンク先</a>

「～」にはページのURIのフルパスを書き込む

• 自分の作ったページを指定する場合 <a href = "ー.html">リンク先</a>

(56)

56

画像を張る

• 上のタグを画像を入れたい部分に書き込む • 数値はピクセルで指定する．大体0.3mm角が1ピクセル大きさの指定画像ファイルの指定画像の説明

(57)

文章の構造に関するタグ

• 単に見かけを太字にするのではなく，「この語は強調」などのように意味づけをすることができる • 指定された役割に応じて太字になったり斜体になったりする

(58)

58

構造タグの種類

• 強調：<em>…</em> • 強い強調:<strong>…</strong> • 定義:<dfn>…</dfn> • 引用元:<cite>….<cite> • 引用：<q>…</q>, <blockquote>…</blockquote> • メールの送信:<a href="mailto:（メールアドレス）">...</a> • 署名:<address>…</address>

(59)

<ul> <li> </li> <li> </li> </ul> <ol> <li> </li> <li> </li> </ol> 箇条書き番号付き箇条書き