ホームページの仕組み

Transcription

1 ホームページの勉強会 カリキュラム 第 1 ステップ : インターネットの起源 第 2 ステップ : インターネットの技術 第 3 ステップ : インターネットの歴史 第 4 ステップ : ホームページの基礎 第 5 ステップ : ブラウンハイムの H P について 第 6 ステップ :H P 編集作成ソフトについて 第 7 ステップ : ホームページビルダーを使う 第 8 ステップ : ホームページ更新の実践 第 9 ステップ : ホームページ更新の実践 第 9 ステップ : 補足学習 1 IT 委員会勉強会

2 インターネットの起源 1961 年 : 米国のユタ州でテロにより 3 ヶ所の電話中継基地が破壊され この事件により軍用回線も一時的に完全停止した 米国の国防総省は 核戦争時には従来の電話網はまったく役に立たなくなると考え 新たな通信システムの研究を始めた その研究により 現在のインターネットでも基本的な考え方となっている下記 2 項目の実現を目標としたネットワーク技術が考え出された 1 分散型ネットワーク 2 情報のパケット ( 小包 ) 化 2 IT 委員会勉強会

3 インターネットの技術 (1/2) 現在のインターネットでも基本的な考え方となっている下記 2 項目の実現を目標としたネットワーク技術が考え出された 1. 分散型ネットワーク 図の (A)(B) 間で通信する場合 (A) から (C) の中継点を通り (B) と通信できるようになります しかし 中継点 (C) が何らかのトラブルで機能しなくなった時は (A)(B) 間で通信は出来なくなります そこで (C) の中継点だけでなく (D) の中継点も使用できるようにすれば 仮に (C) が機能しなくなった時でも (D) を迂回するで (A)(B) 間の通信が可能になります この様に 1 ヶ所に依存する事のないネットワークの仕組みを分散型ネットワークと言います ( 図 1) 3 IT 委員会勉強会

4 インターネットの技術 (2/2) 2. 情報のパケット ( 小包 ) 化 通信をする際に 送るデータを小分けにして送る このことをパケット化といいます 小分けにしてデータを送ることで 通信が一時的に寸断された時でも 続きのデータを送 ( 再送 ) ることができる ( 図 2) 送信側 RTT 受信側 RTO セグメント ACK パケット ( 往復時間 ) ( 再送信時間 ) 4 IT 委員会勉強会

5 インターネットの歴史 実際の運用とその後 ( 学術利用から商用利用へ ) 1969 年 : 9 月にアメリカ内の 4 大学で 24 時間常時つながっているネットワークが運用が開始されました このネットワーク構築を指揮した ARPA( アメリカ国防総省高等研究計画局 ) 名から ARPAnet と名付けられた 1970 年代 : ARPAnet に参加していないアメリカ内の大学や研究所でも同様のネットワークがいくつか構築されました 1980 年代 : この様に学術ネットワークとして拡大していき 1990 年頃にはアメリカ中のネットワークが相互に接続されて行きました 5 IT 委員会勉強会

6 インターネットの歴史 1989 年 : インターネットとパソコン通信の間でメールのやりとりが可能となった 1990 年 : 商用アクセスプロバイダができ インターネットの民間利用に発展していきました < 日本では > 1980 年代 : 学術ネットワークとして一部の大学や研究所等で使われる 1993 年 : 商用利用が郵政省から許可 運用される 1993 年 : ホームページ閲覧ソフトブラウザ Mosaic が開発され インターネット人口が爆発的に増加した ホームページは 1991 年から使用されていましたが 文字データのみで行っていた Mosaic は文字と画像データも扱え 現在のブラウザの元になるソフトでした 6 IT 委員会勉強会

7 Web サイトの歴史 世界最初の Web サイトの誕生から 25 年 世界初の Web サイト は 1991 年 8 月 6 日にスイスのアルプスにある欧州原子核研究機構 (CERN) で誕生した 36 歳の物理学者 ティム バーナーズ = リー (Tim Berbers- Lee) が 世界初のウェブサイトを発表しました ウェブ ブラウザ を持っていたのはバーナーズ = リー氏と同僚たちのみで 世界の人々はこの歴史的な出来事については知らなかった Web サーバーの設置や Web ブラウザの利用は少しずつ広まったが この技術が本格的に勢いを得たのは 1993 年にブラウザ Mosaic が発表された時 7 IT 委員会勉強会

8 Web サイトの歴史 世界最初の Web サイト誕生から 25 年 バーナーズ = リー氏は 1994 年にマサチューセッツ工科大学 (MIT) でワールド ワイド ウェブ コンソーシアム ( W3C ) を設立 異なるウェブサイトが全て同様に機能するよう Web の標準を作成するため その標準が無ければ我々が今日知っているような Web 世界は実現しなかった ハイパーテキスト システムを考案し URL HTTP HTML の最初の設計を行った 公開は社会全体への貢献を第一に考え 特許を取得せず使用料も徴収しなかった 現在 56 歳の同氏は W3C の理事として活躍中 W3C は 現在ヨーロッパ支部は CERN が担うことが期待されていたが CERN は本来の量子物理学に注力するため辞退し フランス国立情報学自動制御研究所 (INRIA) が W3C ヨーロッパ支部を担い 1996 年 慶應義塾大学 ( 藤沢 ) が日本支部を担っている W3C は 現在全世界に 18 支部を有する 8 IT 委員会勉強会

9 ホームページの基礎 目的 : ホームページの仕組みを学びます 2016/5/21 ブラウンハイム管理組合 IT 委員会 9 IT 委員会勉強会

10 ホームページって ホームページは ブラウザ で表示する インターネットのホームページは ブラウザと呼ばれるソフトを使って表示します 代表的なブラウザは Internet Explorer, Firefox, Opera, Safari, Chorome, などがありどれもホームページを見るものです Windows10 では Edge が使われています 10 IT 委員会勉強会

11 代表的なブラウザ 以下の様なブラウザが存在します これ以外のブラウザも存在するが主なものを掲載した 11 IT 委員会勉強会

12 ホームページが見られる仕組み 見たい H P の URL をサーバーに送る ブラウザで H P を見るには H P の URL を入力します ブラウザは 自動的にその H P のサーバーを探し出してくれます サーバーから H P のファイルが送られる 見たい H P のサーバーが見つかると ブラウザで表示 する為に必要なファイルがパソコンに送られてきます URL=Uniform Resource Locator 12 IT 委員会勉強会

13 ホームページを見て貰うには では 我々の H P を見て貰うにはどうしたら良いのでしょうか? 1H P プロバイダーとの契約 2 ホームページコンテンツの作成 3 コンテンツファイルの Web サーバーへの転送 ホームページを作ってプロバイダーのサーバーに送る ブラウンハイムでは lollipop と言うプロバイダーと契約し H P の運用をしています また ドメイン名の登録として ムームードメイン ( 株 ) と契約をしています ( 注 : ドメイン =buraunhaim.com) 13 IT 委員会勉強会

14 Web サイトはどうなっている Web サイトは 複数の Web ページから構成されています この中で 指定された URL を入力した時に 最初に表示されるページを [ トップページ ] それ以外を [ サブページ ] と呼ぶ 14 IT 委員会勉強会

15 Web ページには何が有る? ページには文字と画像が含まれています 文字は HTML ファイルという種類のファイルで 画像は別の画像ファイルとなっています 一つのページは 1 つの HTML ファイルと複数の画像ファイルから構成されています HTML ファイルには タイトル 文章 表などが [HTML 言語 ] と呼ばれる言語で書かれています 15 IT 委員会勉強会

16 ページのしくみ 画像ファイルはページにいくつでも貼り付けることができます 貼り付けるとは HTML ファイルからその画像の名前と場所を参照するだけです したがって HTML ファイルに画像をいくつ貼り付けても ファイル自体の大きさが増えるわけではありません 複雑なページでは 画像ファイル以外にサウンドファイル ( 音声 ) ムービー ( 動画 ) スタイルシートファイル ( ページのレイアウト ) Java アプレット (Java 言語のプログラム ) などを貼り付けることもできます 16 IT 委員会勉強会

17 サイトの管理法 自分のパソコン上に仮想の [ サイト ] を作っておきます [ サイト ] をパソコン上で作ると Web ページで使われているファイルの構成 ページ間のつながり ( リンク ) など ホームページ全体の構造をパソコンで把握できるので Web ページの管理が容易になります [ サイト ] は まず自分のパソコン上に Web ページ専用のフォルダ ( トップフォルダー と言う ) を作成し その中に Web ページを構成する全てのファイルを入れておきます このフォルダ内のファイルが サイトの構成要素として認識されます パソコン上に [ サイト ] を作っておくと 表示確認後にこれらのファイルを [Web サイト ] に一括してサーバーに転送する事が出来ます これで インターネット上で閲覧できるようになります 17 IT 委員会勉強会

18 ブラウザによる表示差 Web ページを作成する際には Web ブラウザによる表示の違いを考慮する必要があります ユーザーが使用する Web ブラウザの種類やバージョンを想定し 表示確認を行います あらかじめ複数の Web ブラウザで表示確認を行えば レイアウトがくずれるなどのリスクを最小限にとどめることができます さまざまなブラウザが存在しますが 出来るだけシェアの高い [Internet Explorer] [FireFox] [Chrome] [Edge] 等で表示確認を行うようにする また 同じブラウザでも 文字のサイズを変えたり 拡大縮小して表示確認を行います 18 IT 委員会勉強会

19 簡単なページを作ってみる パソコン上の サイト と HTML ファイルをジを作ってみます < コンテンツ > 文字 : わたしのホームページへようこそ! 画像 : 写真 1,[ サイト ] フォルダーを作り My Home-page 2, 画像ファイルを保存 3,HTMLファイルを作成 4, ブラウザで表示確認 19 IT 委員会勉強会

20 Html 記述の一例 ( 本文参照 ) <html> <head> <title> わたしのホームページ </title> </head> <body> <h1> わたしのホームページへようこそ!</h1> <p><img src="pe14_l1.gif"/></p> <table> <tr> <td>...</td> 終了タグ タイトル 大見出し </tr> </table> 開始タグ 内容 ( 写真表示 ) </body> </html> 20 IT 委員会勉強会