ホームページの仕組み

Transcription

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

2 補足学習 目的 : ホームページビルダーの使い方を学ぶ前にブラウンハイムのホームページから行う簡易更新について復習します 2017/4/15 ブラウンハイム管理組合 IT 委員会 42 IT 委員会勉強会

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

4 ページと更新方法の違い ブラウンハイムホームページは 2 種の更新方法があると勉強しました 1Web ページからの更新 ( 主に pdf ファイル ) 管理組合お知らせ 自治会のお知らせ等管理画面からコンテンツのアップロードする方法で限られたファイルを簡単に操作出来ます 2 専用のホームページ編集ソフトによる更新 1 以外のページは ホームページ編集ソフトにて編集 アップロードを行う方法で自由な画面編集が出来ます 44 IT 委員会勉強会

5 Web から Upload する 予めpdfファイルを作成しておきWebページからファイルをUploadする 手順へ 45 IT 委員会勉強会

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

7 ホームページビルダーを 使ってみる 目的 : ホームページビルダー ( アプリ ) の基本操作を知り 簡単なページ作成をしてみる 2017/6/17 ブラウンハイム管理組合 IT 委員会 47 IT 委員会勉強会

8 ホームページビルダー V12 (Jyustsystem) HP 作成編集ソフトについて知る 48 IT 委員会勉強会

9 HP(v12) の基本を知る ユーザーマニュアルを活用して勉強しましょう 1 基本操作 2HP 作成の手順 3HP 更新の流れ HPB v12 取説へ 49 IT 委員会勉強会

10 練習課題 HPB を使って Web ページを作成する手順 1PC にローカルフォルダーを作成 2HPB でサイトを設定する 3 ページを作成する 4 ページを転送 ( 保存 ) する 5Web ブラウザで表示を確認する 6 更新をしてみる ( ページの更新 ) 7 更新ページを転送 ( 保存 ) する 8Web ブラウザで表示を確認する 50 IT 委員会勉強会

11 今回は ここまでです 次回の勉強会は 51 IT 委員会 勉強会

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

13 ホームページ更新の実践 目的 : ブラウンハイムのホームページの 更新を具体的に実施してみる 2017/10/21 ブラウンハイム管理組合 IT 委員会 53 IT 委員会勉強会

14 既存 HP 編集の為の設定手順 HPB を使う為の手順 1HPB をインストールする 2PC にサイトのフォルダーを作成する 3HPB のサイト設定をする 4 ページを作成 ( 更新 編集 保存 ) する 5 ページをサーバーに転送する 6Web ブラウザで表示内容を確認する 54 IT 委員会勉強会

15 事前準備 サイト転送設定 HPB で作成したコンテンツファイルをサーバーに転送するための設定をします Lolipop-Svr_Braun その他 ftp.buraunhaim.lollipop.jp Lolipop.jp-buraunhaim gat6zx 55 IT 委員会勉強会

16 事前準備 転送詳細設定次の様に設定します パッシブモードに ( レ ) ポート番号 21 検証するに ( レ ) 56 IT 委員会勉強会

17 事前準備 転送モード設定独自の設定は必要ありません 57 IT 委員会勉強会

18 ホームページの更新 ( 練習 1) 所要時間 :15 分 写真の掲載ホームページの写真 (jpg データ ) の入れ替え ( 更新 ) をやってみましょう 手順 : 1 コンテンツ (jpg データ ) の準備 ファイルサイズ ファイル名など事前に変更 2HPB でサイトを開く 3 更新するページを開く 4 コンテンツを取り込む ( 編集 ) 5 保存し表示確認をする 6HP サーバーに転送する 7Web ブラウザで最終確認する 58 IT 委員会勉強会

19 今回は ここまでです 次回の勉強会は 59 IT 委員会 勉強会

20 ホームページ更新の実践 目的 : ブラウンハイムのホームページの 更新を具体的に実施してみる 2017/11/18 ブラウンハイム管理組合 IT 委員会 60 IT 委員会勉強会

21 ホームページの更新 ( 練習 2) 所要時間 :15 分 リンク処理する文書ページ更新文書ページの掲載とリンク処理をやってみましょう 手順 : 1 コンテンツ ( 文書データ ) の準備 pdf 化 ファイルサイズ ファイル名など事前に変更 2HPB でサイトを開く 3 更新するページを開く 4 コンテンツを取り込む ( 編集 リンク ) 5 保存し表示確認をする 6HP サーバーに転送する 7Web ブラウザで最終確認する 61 IT 委員会勉強会

22 掲示板のページ更新 11 月の自治会 シニア部からのお知らせ を書き換える操作をしてみます [ 手順 ] 1 コンテンツの準備 jpg 素材の作成をします 2 ファイル名を英数にします 準備はこれだけです 62 IT 委員会勉強会

23 今回は ここまでです 次回の勉強会は 63 IT 委員会 勉強会

24 ホームページ更新の実践 目的 : ブラウンハイムのホームページの 更新を具体的に実施してみる 2017/12/16 ブラウンハイム管理組合 IT 委員会 64 IT 委員会勉強会

25 の更新 65 IT 委員会勉強会

26 今回で ホームページの基本と HPB12 を使ってページ更新を する勉強会は終了です 66 IT 委員会 勉強会

27 補足学習 目的 : ブラウハイムホームページの 更新作業が確実に出来るよう繰り返し実践練習を行いスキルアップを行っていきます 2018/1/20 ブラウンハイム管理組合 IT 委員会 67 IT 委員会勉強会

28 補足学習 テーマ : 68 IT 委員会勉強会

29 勉強会補足資料 以下のページは 関連する 用語 について記載しています 69 IT 委員会勉強会

30 用語 HTML( 言語 ) Hyper Text Markup Language のことで 文書にマークアップすることで文書の構造を明示することを目的に使われます 70 IT 委員会勉強会

31 用語 HTML ファイル HTML ファイルは拡張子.html や.htm を持つファイルです [HTML 言語 ] を使って書かれ 文書構造やリンクなどが指定されています HTML ファイルの中で <h1> <p> の様に < > で囲まれているものを [ タグ ] と呼びます ブラウザはこのタグを解釈して 指定された場所に指定された文字や画像を表示します Web ページを作成するためにはこのような HTML タグを書く必要があります この様な面倒な HTML タグを書く代わりをしてくれるの専用ソフトウエアがあります 例 : [ ホームページ ビルダー ] 等 71 IT 委員会勉強会

32 用語 Java アプレット ネットワークを通じて Web ブラウザにダウンロードされ ブラウザの中で実行される Java プログラムの事で アプレット と言う Java アプレットを使と HTML で記述された静的な Web ページでは実現できない動的な表現が可能となる アニメーションの表示やマウスを使ったインタラクティブな操作を可能とする技術である Web ページの一部として自動的に読み込まれて動作するため セキュリティー上の観点から一般のアプリケーションプログラムと比べさまざまな制限が課せられている Java アプレットを悪用してユーザのコンピュータに被害を与えることのないように ユーザのハードディスクの内容を読み書きしたり 自分が呼び出された Web サーバ以外のコンピュータに接続したり 他のアプリケーションソフトの起動を制限している 但し セキュリティー上の制限は ユーザー許諾により解除が可能 最近 Flash の機能が増えてきて Java アプレットと同じようなことが出来るようになってきた Flash プレイヤーは簡単にインストールやアップデートもできるようになってきている 72 IT 委員会勉強会

33 用語 スタイルシート スタイルシートは ページのデザインやレイアウトを定義します CSS= Cascading Style Sheet の略です スタイルシートは ページの内容と デザインやレイアウトを別々に管理できます 細かい設定は CSS ファイルと呼ばれるファイルにまとめておき HTML ファイルから呼び出して使います ページのデザインやレイアウトは HTML ファイルに書くタグ要素で個別に指定することができます また HTML ファイル毎に指定することもできます しかし 内容が増えると管理がむずかしくなるのでこれを避けるために 外部 CSS ファイルを利用します デザインやレイアウトを外部 CSS ファイルで指定すると HTML ファイルの内容がシンプルになり 内容を管理しやすくなります また外部 CSS ファイルを編集するだけで Web ページ全体のデザインやレイアウトを変更することもできます 73 IT 委員会勉強会

34 用語 サイト プロバイダに Web ページ開設申請 すると プロバイダが所有するサーバー ( コンピュータ上 ) に Web ページ用のファイルを置く場所 ( フォルダ ) を確保してくれます このがサイト [ 場所 ] となります インターネットでは Web ページが置かれている場所 つまりサーバーやサーバー内の特定のフォルダを指します 作成した Web ページを世界中に発信するには Web ページに含まれる全てのファイルを 指定されたサーバー上のサイトに転送 ( アップロード ) する必要があります サイト 74 IT 委員会勉強会

35 用語 ブラウザ Mosaic 欧州原子核研究機構 (CERN) が World Wide Web (WWW) の利用を解放した年である 1993 年に イリノイ大学の米国立スーパーコンピュータ応用研究所 (NCSA) に所属するマーク アンドリーセンらが 革新的な Web ブラウザである NCSA Mosaic を開発 リリースした Mosaic は テキストと画像を同一のウインドウ内に混在して表示させることができる最初のウェブブラウザであった それ以前のウェブブラウザは テキストと画像は別ウインドウに表示していた 当時 日本でもウェブを閲覧することを Mosaic する と言っていた 75 IT 委員会勉強会

36 用語 HTTP と URL HTTP =Hypertext Transfer Protocol HTTP( ハイパーテキスト トランスファー プロトコル ) は HTML などのコンテンツの送受信に用いられる通信プロトコル 主として World Wide Web において Web ブラウザと Web サーバとの間での転送に用いられる 似た略号の HTTPS は http にセキュリティ機能を追加したもので Web ページとの通信を暗号化している URL =Uniform Resource Locator URL( ユニフォームリソースロケータ ) は インターネット上のリソース ( ホームページ等の資源 ) を特定する形式的な記号の並び WWW をはじめ インターネットアプリケーションで提供されるリソースの所在を表記することで特定する 日本語 : 統一資源位置指定子 ( とういつしげんいちしていし ) 76 IT 委員会勉強会

37 Web サイトの歴史 1994 年 : World Wide Web Consortium (W3C) を欧州原子核研究機構 (CERN) を離れたティム バーナーズ = リーがアメリカのマサチューセッツ工科大学 (MIT) 創設した 場所はコンピュータ科学研究所 (MIT/LCS) の中で 欧州委員会とインターネットの生みの親でもある国防高等研究計画局 (DARPA) が資金援助した W3C は 業界の会員が集い新標準に合意し 互換性を確保することを目的として生まれた 1995 年 : W3C は ヨーロッパ支部は CERN が担うことが期待されていたが CERN は本来の量子物理学に注力するため辞退し フランス国立情報学自動制御研究所 (INRIA) が W3C ヨーロッパ支部を担い 1996 年 慶應義塾大学が日本支部を担うことになった 1997 年以降 W3C は世界中に支部を設立している 77 IT 委員会勉強会

38 インターネットの用語 HTTP(HyperText Transfer Protocol) HTML(HyperText Markup Language) Web ページを記述するためのマークアップ言語 文書の論理構造や表示の仕方などを記述することができる W3C によって標準化が行われており 大半の Web ブラウザは標準で HTML 文書の解釈 表示が行える CSS (Cascading Style Sheet) Web ページのレイアウトは HTML を用いて記述され HTML にはレイアウトに関する仕様が大量に取り込まれたが これは 文書の論理構造を記述するという本来の HTML の目的に反するため 文書の視覚的構造を規定する枠組みとして CSS が新たに策定された 78 IT 委員会勉強会

39 インターネットの用語 W3C (World Wide Web Consortium) World Wide Web Consortium (W3C) は CERN を離れたティム バーナーズ = リーが 1994 年 10 月 1 日に創設した 場所は MIT コンピュータ科学研究所 (MIT/LCS) の中で 欧州委員会とインターネットの生みの親でもある国防高等研究計画局 (DARPA) が資金援助した W3C は 業界の会員が新たな標準に合意し 互換性を確保することを目的として生まれた もともと W3C のヨーロッパ支部は CERN が担うことが期待されていたが CERN は本来の量子物理学に注力したいということで辞退している 1995 年 4 月 フランス国立情報学自動制御研究所 (INRIA) が W3C ヨーロッパ支部を担うことになり 1996 年 9 月 慶應義塾大学が日本支部を担うことになった 1997 年以降 W3C は世界中に支部を設立している 79 IT 委員会勉強会