情報科学A - sugisaki/old/2017/pre/7class/refference7.… · 情報科学A 第7回インターネットとWebページ 10 インターネットの構造 NetとNetを相互接続したもの

情報科学A

第7回インターネットとWebページ

1情報科学A 第7回インターネットとWebページ

情報科学A

第1回

xxxxx.html

第7回

←今日のフォルダー作成・・・

情報科学A 第7回インターネットとWebページ2

Excelの復習

次ページ以降の4つの曲線を描く。

3情報科学A

リサジュー曲線

座標（x, y)は左の式から出せる時、角度0～360°で下グラフを描く。この時A、B、a、bは下参照。

グラフは散布図（平滑線）を使用

散布図 Curve1.xlsx

4情報科学A

インボリュート曲線

座標（x, y)は左の式から出せる時、角度0～2100°で下グラフを描く。この時Aは左参照。


5情報科学A

カージオイド曲線

座標（x, y)は左の式から出せる時、角度0～2100°で下グラフを描く。この時Aは下参照。

ハートにするにはどうすればよい？


6情報科学A

正葉曲線

座標（x, y)は左の式から出せる時、ラジアンが0～10で下グラフを描く。この時Aは下参照。


今日やることインターネットの仕組み

HTTP、HTMLはどのようなものか

Webページ閲覧の仕組み


インターネットの歴史 1969年にアメリカの国防総省ARPAが4

台のコンピュータを接続


カリフォルニア大学LA

カリフォルニア大学サンタバーバラ

スタンフォード大学

ユタ大学


インターネットの歴史

Asahi-netより抜粋


インターネットの構造 NetとNetを相互接続したもの

プロバイダー（ISP）一次プロバイダー、二次プロバイダー

⇒Inter Net

１次プロバイダ



２次プロバイダ２次

プロバイダ

２次プロバイダ

会社会社

会社会社

会社

大学大学

大学IX


会社

大学

ネットワーク間通信インターネットはISPを介してつながる

AS1

AS2AS9

AS4AS7

AS3

AS6

AS5AS8

http://lg.eastlink.ca/http://lg.he.net/https://www.sprint.net/lg/http://as9370.bgp4.jp/

https://www.sprint.net/lg/

インターネットでできること

Webサイトの閲覧

メールの送受

ファイル転送（FTP）


13

アプリケーション層のプロトコル

メール、WWWのサーバはクライアントからの

リクエストに対応（アプリケーションプロトコル）

TCPやUDPを使ってデータのやり取り

プロトコル：約束事

情報科学A 第7回インターネットとWebページ

14

アプリケーション層のプロトコル

次のアプリケーション層のプロトコルの正式名称と何のためのプロトコルか調べてみましょう。

・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上の

文書を記述するための言語


16


①URLの指定

④Webページ転送のリクエスト

Webブラウザ

WWWサーバ

DNSサーバ

②DNSサーバに名前解決を依頼

③IPアドレスを返信

⑤Webサーバが処理

⑥結果をレスポンスとして返信

DNS

HTTP


17

Webページ閲覧の仕組み（キャッシュ）

①URLの指定

Webブラウザ

WWWサーバDNSサーバ

④ページリクエスト

②名前解決リクエスト

③IPアドレス返信

⑤‘キャッシュの送信

⑤ページのリクエスト

⑥ページ情報の送信

⑦ページ情報の送信

プロキシサーバ

キャッシュ過去に読み込んだWebコンテンツなどを一時保存することプロキシサーバ

プロキシサーバが代理でアクセス



HTML言語

19

HTMLの歴史 1990年にCERNのティムバーナーズリー

によって開発。同時期にHTTPやWWWやWebブラウザも開発

1993年にCERNがWWWを公開 HTML仕様の標準化は初期はIETF、

ver.3.2からはW3C1993年 HTML1.01995年 HTML2.01997年 HTML3.21997年 HTML4.01999年 HTML4.012014年 HTML5


20

HTML HTML言語で書かれたファイルをHTML

ファイルと呼び、”.htm”や”.html”の拡張子がつく

HTML5ができること• 画面遷移

同じページのまま情報をやり取りできる

• マルチメディアの強化動画や音楽の再生/停止が簡単

• UIやデータ処理の強化フォーム機能（アンケートなど）の強化ドラッグアンドドロップのサポート


21

Web作成者の心構え

Webサイトを通じて危険やトラブルとなる場合がある。

問題を引き起こさないWebサイト作成を心がける必要

がある。

不特定多数の人が見ることを念頭に、性別、年齢、

宗教、地域などにも注意

誇大な表現などに注意をし、信頼性の高い情報

発信をすること

著作権に違反しない

閲覧するユーザの立場に立った制作


22

著作権（P.6参照）

著作物

著作者とは

著作権の権利の発生

著作を侵害しないために

① 基本的に他人の制作したものは許可なく使用しない

② Webサイトなどのフリー素材を使用するときは「使用条件」を確認

③ 著作者から承諾を得ても、その使用範囲を確認

④ よくわからない場合は、専門家に相談


23

Webサイトの作成手順（P.8参照）

目的・コンセプト、調査、サイトマップ


１．企画

２．素材の収集・制作

３．サイトのマークアップ

４．CSSの適用

５．デバック

６．運用・更新

テキスト、写真、イラスト

HTMLによるコーディング

Webページのデザイン

不具合のチェック、手直し

Webサーバの公開、日々の更新

24

Webサイトの構成ユーザにとって分かりやすいページを作成

するように心がけるトップページを最上位として2階層で作れる

ことが望ましい（ページのボリュームによる見せたいページの優劣を考えるコンテンツをリストアップし、カテゴリ分け


トップページ

薬学部獣医学部医学部一般教育部

部長より組織沿革開講科目

様々なWebサイトのページ構成を調べてみよう！

25情報科学A 第3回 HTMLの基礎1

ヘッダー

ナビゲーション

コンテンツ

フッター

タグ

 このサイトはHTML5で記述しています 

属性

<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）

Practice7-1_1.html


簡単なWebページの作成（P.45～）

教科書（p.45～）に従って下ファイルになる

ように修正する。

見出し<h1>

太字、改行 

日付の指定<time>

強調

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はどのようなものか

Documents

情報科学A - sugisaki/old/2017/pre/7class/refference7.… · 情報科学A 第7回インターネットとWebページ 10 インターネットの構造 NetとNetを相互接続したもの