情報科学A
第7回 インターネットとWebページ
1 情報科学A 第1回 xxxxx.html 第7回 ←今日のフォルダー作成 ・・・Excelの復習
3 情報科学A
リサジュー曲線
座標（x, y)は左の式から 出せる時、角度0～360° で下グラフを描く。この時 A、B、a、bは下参照。 グラフは散布図（平滑線）を使用 散布図 Curve1.xlsxインボリュート曲線
座標（x, y)は左の式から出 せる時、角度0～2100°で 下グラフを描く。この時Aは 左参照。 散布図 Curve2.xlsx5
カージオイド曲線
座標（x, y)は左の式から出 せる時、角度0～2100°で 下グラフを描く。この時Aは 下参照。 ハートにするにはどう すればよい？ 散布図 Curve3.xlsx正葉曲線
座標（x, y)は左の式から出 せる時、ラジアンが0～10で 下グラフを描く。この時Aは 下参照。 散布図 Curve4.xlsx今日やること
インターネットの仕組み
HTTP、HTMLはどのようなものか Webページ閲覧の仕組み
インターネットの歴史
1969年にアメリカの国防総省ARPAが4 台のコンピュータを接続 カリフォルニア 大学LA カリフォルニア大学 サンタバーバラ スタンフォード 大学 ユタ大学9
インターネットの歴史
インターネットの構造
NetとNetを相互接続したもの プロバイダー（ISP） 一次プロバイダー、二次プロバイダー⇒Inter Net
１次 プロバイダ １次 プロバイダ １次 プロバイダ ２次 プロバイダ ２次 プロバイダ ２次 プロバイダ 会社 会社 会社 会社 会社 大学 大学 大学 IX会社 大学
ネットワーク間通信
インターネットはISPを介してつながる AS1 AS2 AS9 AS4 AS7 AS3 AS6 AS5 AS8 http://lg.eastlink.ca/ http://lg.he.net/ https://www.sprint.net/lg/ http://as9370.bgp4.jp/インターネットでできること
Webサイトの閲覧 メールの送受
13
アプリケーション層のプロトコル
メール、WWWのサーバはクライアントからの リクエストに対応（アプリケーションプロトコル
） TCPやUDPを使ってデータのやり取り プロトコル：約束事アプリケーション層のプロトコル
次のアプリケーション層のプロトコルの正式 名称と何のためのプロトコルか調べてみま しょう。 ・HTTP ⇒Hxxxxx Txxxxx Txxxxx Pxxxxx ⇒何をするプロトコル？ ・HTTPS ⇒Hxxx Txxx Txxx Pxxx Sxxx ⇒何をするプロトコル？15
Webページ閲覧の仕組み
WWW（World Wide Web）、インターネット上 の文書を閲覧する仕組み
WebサーバにWebページや画像を保存 HTTP（Hyper Text Transfer Protocol）プ
ロトコルを使って情報送受信
クライアントPCに閲覧ソフト（ブラウザ） ブラウザーで表示するデータはHTML
（Hyper Text Markup Language）Web上の 文書を記述するための言語
Webページ閲覧の仕組み
①URLの指定 ④Webページ転送 のリクエスト Webブラウザ WWWサーバ DNSサーバ ②DNSサーバに 名前解決を依頼 ③IPアドレスを 返信 ⑤Webサーバが処理 ⑥結果をレスポンス として返信 DNS HTTP17
Webページ閲覧の仕組み
（キャッシュ） ①URLの指定 Webブラウザ WWWサーバ DNSサーバ ④ページリクエスト ②名前解決リクエスト ③IPアドレス返信 ⑤‘キャッシュの送信 ⑤ページのリクエスト ⑥ページ情報の送信 ⑦ページ情報の送信 プロキシサーバ キャッシュ 過去に読み込んだWebコンテ ンツなどを一時保存すること プロキシサーバ プロキシサーバが代理でアク セス19
HTMLの歴史
1990年にCERNのティム バーナーズ リー によって開発。同時期にHTTPやWWWや Webブラウザも開発 1993年にCERNがWWWを公開 HTML仕様の標準化は初期はIETF、 ver.3.2からはW3C 1993年 HTML1.0 1995年 HTML2.0 1997年 HTML3.2 1997年 HTML4.0 1999年 HTML4.01 2014年 HTML5HTML
HTML言語で書かれたファイルをHTML ファイルと呼び、”.htm”や”.html”の拡張 子がつく HTML5ができること • 画面遷移 同じページのまま情報をやり取りできる • マルチメディアの強化 動画や音楽の再生/停止が簡単 • UIやデータ処理の強化 フォーム機能（アンケートなど）の強化ドラッグ アンドドロップのサポート21
Web
作成者の心構え
Webサイトを通じて危険やトラブルとなる場合がある。 問題を引き起こさないWebサイト作成を心がける必要 がある。 不特定多数の人が見ることを念頭に、性別、年齢、 宗教、地域などにも注意 誇大な表現などに注意をし、信頼性の高い情報 発信をすること 著作権に違反しない 閲覧するユーザの立場に立った制作著作権（
P.6
参照）
著作物 著作者とは 著作権の権利の発生 著作を侵害しないために ① 基本的に他人の制作したものは許可なく使用しない ② Webサイトなどのフリー素材を使用するときは「使用条件」を確認 ③ 著作者から承諾を得ても、その使用範囲を確認 ④ よくわからない場合は、専門家に相談23
Web
サイトの作成手順（
P.8
参照）
目的・コンセプト、調査、サイトマップ １．企画 ２．素材の収集・制作 ３．サイトのマークアップ ４．CSSの適用 ５．デバック ６．運用・更新 テキスト、写真、イラスト HTMLによるコーディング Webページのデザイン 不具合のチェック、手直し Webサーバの公開、日々の更新Webサイトの構成
ユーザにとって分かりやすいページを作成 するように心がける トップページを最上位として2階層で作れる ことが望ましい（ページのボリュームによる 見せたいページの優劣を考える コンテンツをリストアップし、カテゴリ分け トップページ 薬学部 獣医学部 医学部 一般教育部 部長より 組織 沿革 開講科目 様々なWebサイトのページ構成を調べてみよう！25
ヘッダー
ナビゲーション
コンテンツ
タグ
<P> このサイトはHTML5で記述しています </P>
属性
<a href=“profile.html”> プロフィール </a>
HTML5
の基礎知識（
P.34
）
開始タグ 修了タグ
内容
「情報科学A」→「第7回」のフォルダーを作 成 「メモ帳」を起動 ファイルを保存するときは、「ファイルの種 類」を「すべてのファイル(*.*)」にして拡張 子を「.html」にする 文字コードは「UTF-8」とする
Web
サイト作成の準備（
P.38
）
HTML
の基本構造（
P.41
）
<!DOCTYPE html> <html lang=“ja”> </html> <head> <meta charset=“UTF-8” /> <title>今日の天気</title> </head> <body> 今日の天気は晴れです。 </body> ヘッダー部 コンテンツ部 ヘッダーの開始 ヘッダーの終了 コンテンツの開始 コンテンツの終了 HTMLドキュメントの開始 HTMLドキュメントの終了 タグを開いたら必ず閉じる構文の意味（
P.41
）
構文の意味は教科書（P.41～P.44）の通り 実際にドキュメント（P.41）を入力し（ファイ ル名をSample7-1.html）、ブラウザで確認し ましょう。 title body Sample7-1.html簡単な
Web
ページの作成（
P.45
）
先ほどのドキュメントを参考に、下のように 表示できるドキュメントを作成しましょう
（ファイル名をPractice7-1.html）
簡単な
Web
ページの作成（
P.45
～）
教科書（p.45～）に従って下ファイルになる ように修正する。 見出し<h1> 太字<strong>、改行<br> 日付の指定<time> 強調<em> Practice7-1_2.html簡単な
Web
ページの作成
先ほどのドキュメントを参考に、下のように 表示できるドキュメントを作成しましょう （ファイル名をPractice7-2.html） 見出し（h1） 太字 日付の指定 強調 Practice7-2_1.html画像の表示（
P.68
）
「images」フォルダーがなければ作成し、 flower01.jpgをダウンロードしておく 構文の意味は教科書（P.68～P.70）の通り Pracetice7-2.htmlに</body>の直前行に以 下を追加 <img src=“images/flower01.jpg”> 完成Webページは次ページ Practice7-2_2.htmlできた人は写真や文章 を追加する
まとめ
インターネットの仕組み
HTTP、HTMLはどのようなものか Webページ閲覧の仕組み
