ネットワーク入門

Size: px

Start display at page:

Download "ネットワーク入門"

すずりふしはら
5 years ago
Views:

1 情報科学 A 第 7 回インターネットと Web ページ情報科学 A 第 1 回第 7 回今日のフォルダー作成 xxxxx.html 1

2 Excel の復習次ページ以降の 4 つの曲線を描く 2

3 散布図リサジュー曲線 Curve1.xlsx 座標 (x, y) は左の式から出せる時角度 0~360 で下グラフを描くこの時 A B a b は下参照情報科学 A グラフは散布図 ( 平滑線 ) を使用 3

4 散布図インボリュート曲線 Curve2.xlsx 座標 (x, y) は左の式から出せる時角度 0~2100 で下グラフを描くこの時 A は左参照情報科学 A 4

5 散布図カージオイド曲線 Curve3.xlsx 座標 (x, y) は左の式から出せる時角度 0~2100 で下グラフを描くこの時 A は下参照情報科学 A ハートにするにはどうすればよい? 5

6 散布図正葉曲線 Curve4.xlsx 座標 (x, y) は左の式から出せる時ラジアンが 0~10 で下グラフを描くこの時 A は下参照情報科学 A 6

7 今日やることインターネットの仕組み HTTP HTMLはどのようなものか Webページ閲覧の仕組み 7

8 インターネットの歴史 1969 年にアメリカの国防総省 ARPA が 4 台のコンピュータを接続カリフォルニア大学 LA カリフォルニア大学サンタバーバラスタンフォード大学ユタ大学 8

9 インターネットの歴史 Asahi-net より抜粋 9

10 インターネットの構造 Net と Net を相互接続したもの Inter Net プロバイダー (ISP) 一次プロバイダー二次プロバイダー 1 次プロバイダ会社 1 次プロバイダ会社 2 次プロバイダ大学 2 次プロバイダ会社 IX 大学 1 次プロバイダ 2 次プロバイダ会社大学会社 10

ネットワーク間通信インターネットは ISP を介してつながる AS5 AS8 会社 AS1 AS2 AS6 AS9 AS7 AS4 AS3 大学 http://lg.

11 ネットワーク間通信インターネットは ISP を介してつながる AS5 AS8 会社 AS1 AS2 AS6 AS9 AS7 AS4 AS3 大学

12 インターネットでできること Web サイトの閲覧メールの送受ファイル転送 (FTP) 12

13 アプリケーション層のプロトコルメール WWWのサーバはクライアントからのリクエストに対応 ( アプリケーションプロトコル ) TCPやUDPを使ってデータのやり取りプロトコル : 約束事 13

14 アプリケーション層のプロトコル次のアプリケーション層のプロトコルの正式名称と何のためのプロトコルか調べてみましょう HTTP Hxxxxx Txxxxx Txxxxx Pxxxxx 何をするプロトコル? HTTPS Hxxx Txxx Txxx Pxxx Sxxx 何をするプロトコル? 14

15 Web ページ閲覧の仕組み WWW(World Wide Web) インターネット上の文書を閲覧する仕組み Web サーバに Web ページや画像を保存 HTTP(Hyper Text Transfer Protocol) プロトコルを使って情報送受信クライアント PC に閲覧ソフト ( ブラウザ ) ブラウザーで表示するデータは HTML (Hyper Text Markup Language)Web 上の文書を記述するための言語 15

16 Web ページ閲覧の仕組み DNS DNS サーバ Web ブラウザ 1URL の指定 2DNSサーバに名前解決を依頼 3IP アドレスを返信 4Web ページ転送のリクエスト HTTP WWW サーバ 6 結果をレスポンスとして返信 5Web サーバが処理 16

17 Web ページ閲覧の仕組み ( キャッシュ ) DNS サーバ WWW サーバ 2 名前解決リクエスト 3IP アドレス返信 5 ページのリクエスト Web ブラウザプロキシサーバ 6 ページ情報の送信 1URL の指定 4 ページリクエスト 5 キャッシュの送信 7 ページ情報の送信キャッシュ過去に読み込んだ Web コンテンツなどを一時保存することプロキシサーバプロキシサーバが代理でアクセス 17

18 HTML 言語 18

19 HTML の歴史 1990 年に CERN のティムバーナーズリーによって開発同時期に HTTP や WWW や Web ブラウザも開発 1993 年に CERN が WWW を公開 HTML 仕様の標準化は初期は IETF ver.3.2 からは W3C 1993 年 HTML 年 HTML 年 HTML 年 HTML 年 HTML 年 HTML5 19

20 HTML HTML 言語で書かれたファイルを HTML ファイルと呼び.htm や.html の拡張子がつく HTML5 ができること画面遷移同じページのまま情報をやり取りできるマルチメディアの強化動画や音楽の再生 / 停止が簡単 UI やデータ処理の強化フォーム機能 ( アンケートなど ) の強化ドラッグアンドドロップのサポート 20

21 Web 作成者の心構え Webサイトを通じて危険やトラブルとなる場合がある問題を引き起こさないWebサイト作成を心がける必要がある不特定多数の人が見ることを念頭に性別年齢宗教地域などにも注意誇大な表現などに注意をし信頼性の高い情報発信をすること著作権に違反しない閲覧するユーザの立場に立った制作 21

22 著作権 (P.6 参照 ) 著作物著作者とは著作権の権利の発生著作を侵害しないために基本的に他人の制作したものは許可なく使用しない Webサイトなどのフリー素材を使用するときは使用条件を確認著作者から承諾を得てもその使用範囲を確認よくわからない場合は専門家に相談 22

23 Web サイトの作成手順 (P.8 参照 ) 1. 企画目的コンセプト調査サイトマップ 2. 素材の収集制作テキスト写真イラスト 3. サイトのマークアップ HTML によるコーディング 4.CSS の適用 Web ページのデザイン 5. デバック不具合のチェック手直し 6. 運用更新 Web サーバの公開日々の更新 23

24 Web サイトの構成ユーザにとって分かりやすいページを作成するように心がけるトップページを最上位として 2 階層で作れることが望ましい ( ページのボリュームによる見せたいページの優劣を考えるコンテンツをリストアップしカテゴリ分けトップページ薬学部獣医学部医学部一般教育部部長より組織沿革開講科目様々な Web サイトのページ構成を調べてみよう! 24

25 ヘッダーナビゲーションコンテンツフッター情報科学 A 第 3 回 HTML の基礎 1 25

26 HTML5 の基礎知識 (P.34) タグ属性 このサイトは HTML5 で記述しています 開始タグ修了タグ内容 <a href= profile.html > プロフィール </a> 属性名値情報科学 A 第 3 回 HTML の基礎 1 26

27 Web サイト作成の準備 (P.38) 情報科学 A 第 7 回のフォルダーを作成メモ帳を起動ファイルを保存するときはファイルの種類をすべてのファイル (*.*) にして拡張子を.html にする文字コードは UTF-8 とする情報科学 A 第 3 回 HTML の基礎 1 27

28 HTML の基本構造 (P.41) <!DOCTYPE html> <html lang= ja > HTML ドキュメントの開始 <head> ヘッダーの開始 <meta charset= UTF-8 /> <title> 今日の天気 </title> </head> ヘッダーの終了ヘッダー部コンテンツ部 <body> コンテンツの開始今日の天気は晴れです </body> コンテンツの終了 </html> HTML ドキュメントの終了情報科学 A 第 3 回 HTML の基礎 1 タグを開いたら必ず閉じる 28

29 構文の意味 (P.41) 構文の意味は教科書 (P.41~P.44) の通り実際にドキュメント (P.41) を入力し ( ファイル名を Sample7-1.html) ブラウザで確認しましょう title body Sample7-1.html 情報科学 A 第 3 回 HTML の基礎 1 29

30 簡単な Web ページの作成 (P.45) 先ほどのドキュメントを参考に下のように表示できるドキュメントを作成しましょう ( ファイル名を Practice7-1.html) Practice7-1_1.html 情報科学 A 第 3 回 HTML の基礎 1 30

31 簡単な Web ページの作成 (P.45~) 教科書 (p.45~) に従って下ファイルになるように修正する見出し <h1> 日付の指定 <time> 強調 太字 改行 Practice7-1_2.html 情報科学 A 第 3 回 HTML の基礎 1 31

32 簡単な Web ページの作成先ほどのドキュメントを参考に下のように表示できるドキュメントを作成しましょう ( ファイル名を Practice7-2.html) 見出し (h1) 日付の指定強調 Practice7-2_1.html 太字情報科学 A 第 3 回 HTML の基礎 1 32

33 画像の表示 (P.68) images フォルダーがなければ作成し flower01.jpg をダウンロードしておく構文の意味は教科書 (P.68~P.70) の通り Pracetice7-2.html に </body> の直前行に以下を追加 <img src= images/flower01.jpg > 完成 Web ページは次ページ Practice7-2_2.html 情報科学 A 第 3 回 HTML の基礎 1 33

34 できた人は写真や文章を追加する情報科学 A 第 3 回 HTML の基礎 1 34

35 まとめインターネットの仕組み HTTP HTMLはどのようなものか Webページ閲覧の仕組み 35

ネットワーク入門

ネットワーク入門情報科学 A 第 7 回インターネットと Web ページ情報科学 A 今日のフォルダー作成第 1 回第 7 回 images xxxxx.html xxxxx.jpg 1 今日やること Excelによるマクロ機能インターネットの仕組み Webページ閲覧の仕組み Webページの作成 2 Excel のマクロ機能マクロ繰り返し同じ操作を行うときその一連作業をマクロに記録しておくと作業の効率が上がる