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