情報科学A
第7回 インターネットとWebページ
情報科学A 第1回 xxxxx.html 第7回 今日のフォルダー作成 ・・・ xxxxx.jpg images今日やること
Excelによるマクロ機能 インターネットの仕組み Webページ閲覧の仕組み Webページの作成 2Excelのマクロ機能
マクロ
繰り返し同じ操作を行うとき、その一連作業を 「マクロ」に記録しておくと、作業の効率が上が る
情報科学A 第7回 インターネットとWebページ
マクロ
① Stuサーバより「Sample7-1.xlsx」をダウンロード ② 「表示」タブの「マクロ」グループをクリックし「マクロの記録」 を選ぶ ③ 「マクロの記録」を右の通りにする ④ 「OK」で記録開始 やりたいこと 自動で賃料が安い上位10件を抽出し、リセットも行いたい 上位10件を抽出 毎月上位10件を出す作業をする とき、効率化する方法はないか？マクロ
① セル【B6】をクリック ② 「データ」タブの「並び替えとフィルタ－」からオートフィルタ をクリック ③ セル【G6】の賃料の三角形をクリックし、「数値フィルター」 →「トップテンオートフィルター」 ④ セル【G6】のオートフィルタマーク から「昇順」を選ぶ ⑤ 「表示」タブの「マクロ」から「記録終了」を選択 ピンク字はマクロ記録中なので操作を間違えないように！情報科学A 第7回 インターネットとWebページ
マクロ
① さっきと同様にマクロを記録する。マクロ名は「リセット」 ② セル【B6】をクリックし、「データ」タブの「並び替えとフィル ター」のロートマークをクリックしオートフィルタ解除 ③ 更にセル【B6】をクリックし、昇順フィルタ（A↓Zマーク）を クリック ④ 「表示」タブの「マクロ」から「記録終了」 リセット ① 「表示」→「マクロ」から「マクロの表示」を選択。 ② ウィンドウから「賃料が安い上位１０件」を選択し実行 ③ リセットも同様 実行マクロ
① ボタン作成する「フォーム」をリボンに追加するため、 「ファイル」→「オプション」 ② 「リボンのユーザ設定」カテゴリより「リボンのユーザー設 定」内の「開発」にチェックしOK ③ リボンに追加された「開発」タブ 「コントロール」の「挿入」を クリックし、「フォーム コントロール」の四角 をクリック ボタン作成情報科学A 第7回 インターネットとWebページ
マクロ
① シート上でドラッグして適当な大きさのボタンを作成し、 「賃料の安い上位10件」を選択しOK ② ボタン内のテキストにも同様に「賃料の。。。」と書く ③ リセットについても同様 ボタン作成つづきマクロ
① ボタンをクリックしてマクロを実行 マクロの実行 ① いつもと同様に名前を付けて保存 ② ただし、「ファイルの種類」は「Excelマクロ有効ブック」を選 択する。 マクロの保存 練習（今使用したブックにマクロ設定） 面積の広い上位5件を抽出し、降順に並び替えるマ クロを記録する。また、そのマクロをフォームボタンに 登録し、実行する。これからやること
これまでは、データを見やすい形にまとめた り、膨大なデータの中から条件に合うものだ けを抽出した。これからは、そのデータを公 開するための手法である、Webページの作成 を学ぶ。 10インターネットの歴史
1969年にアメリカの国防総省ARPAが4 台のコンピュータを接続 カリフォルニア 大学LA カリフォルニア大学 サンタバーバラ スタンフォード 大学（研究所） ユタ大学12 情報科学A 第7回 インターネットとWebページ
インターネットの歴史
Asahi-netより抜粋
インターネットの構造
NetとNetを相互接続したもの プロバイダー（ISP） 一次プロバイダー、二次プロバイダー⇒Inter Net
１次 プロバイダ １次 プロバイダ １次 プロバイダ ２次 プロバイダ ２次 プロバイダ ２次 プロバイダ 会社 会社 会社 会社 会社 大学 大学 大学 IX14 情報科学A 第7回 インターネットとWebページ 北里大学 大学等
ネットワーク間通信
インターネットはISPを介してつながる AS1 AS2 AS9 AS4 AS7 AS3 AS6 AS5 AS8 www.washington.edu www.maroc.ma北里大学 大学 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サイトの閲覧 メールの送受
ファイル転送（FTP）
アプリケーション層のプロトコル
メール、WWWのサーバはクライアントからの リクエストに対応（アプリケーション
プロトコル
） TCPやUDPを使ってデータのやり取り18
アプリケーション層のプロトコル
次のアプリケーション層のプロトコルの正式 名称と何のためのプロトコルか調べてみま しょう。 ・HTTP ⇒Hxxxxx Txxxxx Txxxxx Pxxxxx ⇒何をするプロトコル？ ・HTTPS ⇒Hxxx Txxx Txxx Pxxx Sxxx ⇒何をするプロトコル？Webページ閲覧の仕組み
WWW（World Wide Web）、インターネット上 の文書を閲覧する仕組み
WebサーバにWebページや画像を保存 HTTP（Hyper Text Transfer Protocol）プ
ロトコルを使って情報送受信
クライアントPCに閲覧ソフト（ブラウザ） ブラウザで表示するデータはHTML
（Hyper Text Markup Language）。Web上 の文書を記述するための言語
20
Webページ閲覧の仕組み
①URLの指定 ④Webページ転送 のリクエスト Webブラウザ WWWサーバ DNSサーバ ②DNSサーバに 名前解決を依頼 ③IPアドレスを 返信 ⑤Webサーバが処理 ⑥結果をレスポンス として返信 DNS HTTPWebページ閲覧の仕組み
（キャッシュ） ①URLの指定 Webブラウザ WWWサーバ DNSサーバ ④ページリクエスト ②名前解決リクエスト ③IPアドレス返信 ⑤‘キャッシュの送信 ⑤ページのリクエスト ⑥ページ情報の送信 ⑦ページ情報の送信 プロキシサーバ キャッシュ 過去に読み込んだWebコンテ ンツなどを一時保存すること プロキシサーバ プロキシサーバが代理でアク セス22
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年 HTML524
HTML
HTML言語で書かれたファイルをHTML ファイルと呼び、”.htm”や”.html”の拡張 子がつく HTML5ができること • 画面遷移 同じページのまま情報をやり取りできる • マルチメディアの強化 動画や音楽の再生/停止が簡単 • UIやデータ処理の強化 フォーム機能（アンケートなど）の強化ドラッグ アンドドロップのサポートWeb
作成者の心構え
Webサイトを通じて危険やトラブルに遭遇する場合が ある。問題を引き起こさないWebサイト作成を心がけ る必要がある。 不特定多数の人が見ることを念頭に、性別、年齢、 宗教、地域などにも注意 誇大な表現などに注意をし、信頼性の高い情報 発信をすること 著作権に違反しない 閲覧するユーザの立場に立った制作26
著作権（
P.6
参照）
著作物 著作者とは 著作権の権利の発生 著作を侵害しないために ① 基本的に他人の制作したものは許可なく使用しない ② Webサイトなどのフリー素材を使用するときは「使用条件」を確認 ③ 著作者から承諾を得ても、その使用範囲を確認 ④ よくわからない場合は、使用しないWeb
サイトの作成手順（
P.8
参照）
目的・コンセプト、調査、サイトマップ １．企画 ２．素材の収集・制作 ３．サイトのマークアップ ４．CSSの適用 ５．デバック ６．運用・更新 テキスト、写真、イラスト HTMLによるコーディング Webページのデザイン 不具合のチェック、手直し Webサーバの公開、日々の更新28
Webサイトの構成
ユーザにとって分かりやすいページを作成 するように心がける トップページを最上位として2階層で作れる ことが望ましい（ページのボリュームによる 見せたいページの優劣を考える コンテンツをリストアップし、カテゴリ分け トップページ 薬学部 獣医学部 医学部 一般教育部 部長より 組織 沿革 開講科目 様々なWebサイトのページ構成を調べてみよう！ヘッダー
ナビゲーション
コンテンツ
タグ
<P> このサイトはHTML5で記述しています </P>
属性
<a href=“profile.html”> プロフィール </a>
30 情報科学A 第7回 インターネットとWebページ
HTML5
の基礎知識（
P.34
）
開始タグ 修了タグ 内容 属性名 値 「メモ帳」を起動 ファイルを保存するときは、「ファイルの種 類」を「すべてのファイル(*.*)」にして拡張 子を「.html」にする 文字コードは「UTF-8」とする
Web
サイト作成の準備（
P.38
）
32 情報科学A 第7回 インターネットとWebページ
HTML
の基本構造（
P.41
）
<!DOCTYPE html> <html lang=“ja”> </html> <head> <meta charset=“UTF-8” /> <title>今日の天気</title> </head> <body> 今日の天気は晴れです。 </body> ヘッダー部 コンテンツ部 ヘッダーの開始 ヘッダーの終了 コンテンツの開始 コンテンツの終了 HTMLドキュメントの開始 HTMLドキュメントの終了 タグを開いたら必ず閉じる HTML5で作成されたものであることを宣言構文の意味（
P.41
）
構文の意味は教科書（P.41～P.44）の通り 実際にドキュメント（P.41）を入力し（ファイ ル名をSample7-2.html）、ブラウザで確認し ましょう。 title body34 情報科学A 第7回 インターネットとWebページ
簡単な
Web
ページの作成（
P.45
）
先ほどのドキュメントに追加する
簡単な
Web
ページの作成（
P.45
～）
教科書（p.45～）に従って下ファイルになる ように修正する。 見出し<h1> 太字<strong>、改行<br> 日付の指定<time> 強調<em> 段落<p> 段落<p>36 情報科学A 第7回 インターネットとWebページ
簡単な
Web
ページの作成
先ほどのドキュメントを参考に、下のように 表示できるドキュメントを作成しましょう （ファイル名をPractice7-1-1.html） 見出し（h1） 日付の指定<time> 段落<p> 改行<br> 強調<em> 太字<strong> 段落<p>画像の表示（
P.68
）
「images」フォルダーがなければ作成し、stu サーバからflower01.jpgをダウンロードしておく 下構文の意味は教科書（P.68～P.70）の通り Practice7-1.htmlの</body>直前行に以下を 追加 <img src=“../images/flower01.jpg”> 完成Webページは次ページ 「一つ上のフォルダ→imagesフォルダ→flower01.jpg」のこと38 情報科学A 第7回 インターネットとWebページ できた人は自分の出身 地に関するページを画 像入りで作成する。ファ イル名はPractice7-2.html。
まとめ
インターネットの仕組み
HTTP、HTMLはどのようなものか Webページ閲覧の仕組み
