ホームページの勉強会
【カリキュラム】
第１ステップ：インターネットの起源
第２ステップ：インターネットの技術
第３ステップ：インターネットの歴史
第４ステップ：ホームページの基礎
第５ステップ：ブラウンハイムのＨ･Ｐについて
第６ステップ：Ｈ･Ｐ編集作成ソフトについて
第７ステップ：ホームページビルダーを使う
第８ステップ：ホームページ更新の実践
第９ステップ：ホームページ更新の実践
第９ステップ：補足学習
1 IT委員会 勉強会補足学習
目的：ホームページビルダーの使い方を学ぶ
前に
ブラウンハイムのホームページから行う
簡易更新について復習します。
２０１７／４／１５ ブラウンハイム管理組合ホームページの勉強会
【カリキュラム】
第１ステップ：インターネットの歴史
第２ステップ：インターネットの技術
第３ステップ：ウエブサイトの歴史
第４ステップ：ホームページの基礎
第５ステップ：ブラウンハイムのＨ･Ｐについて
第６ステップ：Ｈ･Ｐ編集作成ソフトについて
補足学習 ：ホームページからの更新実践
第７ステップ：ホームページビルダーを使う
第８ステップ：ホームページ更新の実践
第９ステップ：ホームページ更新の実践
第９ステップ：補足学習
43 IT委員会 勉強会ページと更新方法の違い
ブラウンハイムホームページは、２種の更新方法
があると勉強しました。
①
Webページからの更新（主にpdfファイル）
管理組合お知らせ、自治会のお知らせ等
管理画面からコンテンツのアップロードする
方法で限られたファイルを簡単に操作出来ます
②専用のホームページ編集ソフトによる更新
①以外のページは、ホームページ編集ソフト
にて編集、アップロードを行う方法で自由な
画面編集が出来ます。
WebからUploadする
予め
pdfファイルを作成しておきWebページから
ファイルを
Uploadする
。
45 IT委員会 勉強会
ホームページの勉強会
【カリキュラム】
第１ステップ：インターネットの歴史
第２ステップ：インターネットの技術
第３ステップ：ウエブサイトの歴史
第４ステップ：ホームページの基礎
第５ステップ：ブラウンハイムのＨ･Ｐについて
第６ステップ：Ｈ･Ｐ編集作成ソフトについて
補足学習 ：ホームページからの更新実践
第７ステップ：ホームページビルダーを使う
第８ステップ：ホームページ更新の実践
第９ステップ：ホームページ更新の実践
第９ステップ：補足学習
ホームページビルダーを
使ってみる
目的：ホームページビルダー（アプリ）の
基本操作を知り、簡単なページ作成を
してみる。
２０１７／６／１７ ブラウンハイム管理組合 ＩＴ委員会 47 IT委員会 勉強会ホームページビルダー
V12
（
Jyustsystem）
HP(v12)の基本を知る
ユーザーマニュアルを活用して
勉強しましょう。
①基本操作
②ＨＰ作成の手順
③ＨＰ更新の流れ
49 IT委員会 勉強会 ＨＰＢ v12 取説へ練習課題
HPBを使ってWebページを作成する手順
①ＰＣにローカルフォルダーを作成
②
HPBでサイトを設定する
③ページを作成する
④ページを転送（保存）する
⑤
Webブラウザで表示を確認する
⑥更新をしてみる（ページの更新）
⑦更新ページを転送（保存）する
⑧
Webブラウザで表示を確認する
今回は、ここまでです
次回の勉強会は
IT委員会 勉強会 51
ホームページの勉強会
【カリキュラム】
第１ステップ：インターネットの歴史
第２ステップ：インターネットの技術
第３ステップ：ウエブサイトの歴史
第４ステップ：ホームページの基礎
第５ステップ：ブラウンハイムのＨ･Ｐについて
第６ステップ：Ｈ･Ｐ編集作成ソフトについて
第７ステップ：ホームページビルダーを使う
第８ステップ：ホームページ更新の実践
第９ステップ：ホームページ更新の実践
第９ステップ：補足学習
ホームページ更新の実践
目的：ブラウンハイムのホームページの
更新を具体的に実施してみる。
２０１７／１０／２１ ブラウンハイム管理組合 ＩＴ委員会 53 IT委員会 勉強会既存
HP編集の為の設定手順
HPBを使う為の手順
①
HPBをインストールする
②
PCにサイトのフォルダーを作成する
③
HPBのサイト設定をする
④ページを作成（更新･編集･保存）する
⑤ページをサーバーに転送する
⑥
Webブラウザで表示内容を確認する
事前準備
サイト転送設定
HPBで作成した
コンテンツファイルを
サーバーに転送する
ための設定をします。
Lolipop-Svr_Braun その他 ftp.buraunhaim.lollipop.jp Lolipop.jp-buraunhaim gat6zx 55 IT委員会 勉強会事前準備
転送詳細設定
次の様に設定します。
パッシブモードに（レ） ポート番号 21 検証するに（レ）事前準備
転送モード設定
独自の設定は
必要ありません。
ホームページの更新
（練習①）
写真の掲載
ホームページの写真（
jpgデータ）の
入れ替え（更新）をやってみましょう。
手順：
①コンテンツ（
jpgデータ）の準備
※ファイルサイズ、ファイル名など事前に変更 ②
HPBでサイトを開く
③更新するページを開く
④コンテンツを取り込む（編集）
⑤保存し表示確認をする
⑥
HPサーバーに転送する
⑦
Webブラウザで最終確認する
所要時間：15分今回は、ここまでです
次回の勉強会は
IT委員会 勉強会 59
ホームページ更新の実践
目的：ブラウンハイムのホームページの
更新を具体的に実施してみる。
２０１７／１１／１８ ブラウンハイム管理組合
ホームページの更新
（練習②）
リンク処理する文書ページ更新
文書ページの掲載とリンク処理を
やってみましょう。
手順：
①コンテンツ（文書データ）の準備
※pdf化、ファイルサイズ、ファイル名など事前に変更 ②
HPBでサイトを開く
③更新するページを開く
④コンテンツを取り込む（編集、リンク）
⑤保存し表示確認をする
⑥
HPサーバーに転送する
⑦
Webブラウザで最終確認する
61 IT委員会 勉強会 所要時間：15分掲示板のページ更新
１１月の自治会
「シニア部からのお知らせ」を
書き換える操作をしてみます。
［手順］
①コンテンツの準備
jpg素材の作成をします。
②ファイル名を英数にします。
★準備はこれだけです
。
今回は、ここまでです
次回の勉強会は
IT委員会 勉強会 63
ホームページ更新の実践
目的：ブラウンハイムのホームページの
更新を具体的に実施してみる。
２０１７／１２／１６ ブラウンハイム管理組合
の更新
今回で、ホームページの基本と
HPB12を使ってページ更新を
補足学習
目的：ブラウハイムホームページの
更新作業が確実に出来るよう
繰り返し実践練習を行い
スキルアップを行っていきます。
２０１８／１／２０ ブラウンハイム管理組合 ＩＴ委員会 67 IT委員会 勉強会補足学習
勉強会補足資料
以下のページは、関連する
【用語】について記載しています
【用語】
HTML(言語)
Hyper Text Markup Language のことで、文書にマークアップす
ることで文書の構造を明示することを目的に使われます。
【用語】
HTMLファイル
HTML ファイルは拡張子 .html や .htm を持つファイルです。 ［HTML 言語］を使って書かれ、文書構造やリンクなどが指定され ています。 HTML ファイルの中で <h1> <p> の様に < > で囲まれているものを ［タグ］と呼びます。ブラウザはこのタグを解釈して、指定された 場所に指定された文字や画像を表示します。 Web ページを作成するためにはこのような ＨＴＭＬタグを書く必 要があります。 この様な面倒なHTMLタグを書く代わりをしてくれるの専用ソフト ウエアがあります。例： ［ホームページ・ビルダー］等 71 IT委員会 勉強会【用語】
Javaアプレット
ネットワークを通じてWeb ブラウザにダウンロードされ、ブラウザ の中で実行される Java プログラムの事で「アプレット」と言う。 Java アプレットを使と、HTML で記述された静的な Web ページでは 実現できない動的な表現が可能となる。アニメーションの表示やマ ウスを使ったインタラクティブな操作を可能とする技術である。 Web ページの一部として自動的に読み込まれて動作するため、セ キュリティー上の観点から一般のアプリケーションプログラムと比 べさまざまな制限が課せられている。Java アプレットを悪用して ユーザのコンピュータに被害を与えることのないように、ユーザの ハードディスクの内容を読み書きしたり、自分が呼び出されたWeb サーバ以外のコンピュータに接続したり、他のアプリケーションソ フトの起動を制限している。但し、セキュリティー上の制限は、 ユーザー許諾により解除が可能。 最近、Flash の機能が増えてきて、Java アプレットと同じようなこと が出来るようになってきた。Flash プレイヤーは簡単にインストール【用語】スタイルシート
スタイルシートは、ページのデザインやレイアウトを定義します。
CSS＝ Cascading Style Sheet の略です。
スタイルシートは、ページの内容と、デザインやレイアウトを別々 に管理できます。細かい設定は CSS ファイルと呼ばれるファイル にまとめておき、HTML ファイルから呼び出して使います。 ページのデザインやレイアウトは、HTML ファイルに書くタグ要素 で個別に指定することができます。また HTMLファイル毎に指定 することもできます。しかし、内容が増えると管理がむずかしくなる のでこれを避けるために、外部 CSS ファイルを利用します。 デザインやレイアウトを外部 CSS ファイルで指定すると、HTML ファイルの内容がシンプルになり、内容を管理しやすくなります。 また外部 CSS ファイルを編集するだけで、Web ページ全体のデ ザインやレイアウトを変更することもできます。 73 IT委員会 勉強会
【用語】サイト
「プロバイダに Web ページ開設申請」すると、プロバイダが所有す るサーバー（コンピュータ上）に Web ページ用のファイルを置く場 所（フォルダ）を確保してくれます。このがサイト［場所］となります。 インターネットでは Web ページが置かれている場所、つまりサー バーやサーバー内の特定のフォルダを指します。 作成した Web ページを世界中に発信するには、Web ページに含 まれる全てのファイルを、指定されたサーバー上のサイトに転送 （アップロード）する必要があります。 サイト【用語】
ブラウザ
「
Mosaic
」
欧州原子核研究機構（CERN）がWorld Wide Web （WWW）の利用
を解放した年である1993年に、イリノイ大学の米国立スーパーコ ンピュータ応用研究所 (NCSA) に所属するマーク・アンドリーセン らが、革新的な Webブラウザである NCSA Mosaic を開発・リリー スした。 Mosaic は、テキストと画像を同一のウインドウ内に混在して表示 させることができる最初のウェブブラウザであった。それ以前の ウェブブラウザは、テキストと画像は別ウインドウに表示していた。 当時、日本でもウェブを閲覧することを「Mosaic する」と言ってい た。 75 IT委員会 勉強会
【用語】
HTTPとURL
【
HTTP】 ＝Hypertext Transfer Protocol
ＨＴＴＰ（ハイパーテキスト・トランスファー・プロトコ
ル、）は、HTMLなどのコンテンツの送受信に用いられる通 信プロトコル、 主としてWorld Wide Webにおいて、Web ブラウザとWebサーバとの間での転送に用いられる。
似た略号のHTTPSは、httpにセキュリティ機能を追加したもので、 Webページとの通信を暗号化している。
【
URL】 ＝Uniform Resource Locator
ＵＲＬ（ユニフォーム リソース ロケータ）は、インターネット上のリ
ソース（ホームページ等の資源）を特定する形式的な記号の並び。 WWWをはじめ、インターネットアプリケーションで提供されるリソー スの所在を表記することで特定する。
Webサイトの歴史
１９９４年：
World Wide Web Consortium (W3C) を欧州原子核研究機構 （CERN）を離れたティム・バーナーズ＝リーがアメリカのマサ チューセッツ工科大学（MIT）創設した。場所はコンピュータ科学研 究所(MIT/LCS) の中で、欧州委員会とインターネットの生みの親 でもある国防高等研究計画局 (DARPA) が資金援助した。 W3Cは、業界の会員が集い新標準に合意し、互換性を確保する ことを目的として生まれた。
１９９５年：
W3Cは、ヨーロッパ支部はCERNが担うことが期待されていたが、 CERNは本来の量子物理学に注力するため辞退し、フランス国立 情報学自動制御研究所（INRIA）がW3Cヨーロッパ支部を担い、 1996年、慶應義塾大学が日本支部を担うことになった。1997年以 降、W3Cは世界中に支部を設立している。 77 IT委員会 勉強会インターネットの用語
HTTP
（
HyperText Transfer Protocol
）
HTML
（
HyperText Markup Language）
Webページを記述するためのマークアップ言語。文書の論
理構造や表示の仕方などを記述することができる。W3Cに
よって標準化が行われており、大半のWebブラウザは標準
でHTML文書の解釈・表示が行える。
CSS
（
Cascading Style Sheet）
WebページのレイアウトはHTMLを用いて記述され、HTML
にはレイアウトに関する仕様が大量に取り込まれたが、これ
は、文書の論理構造を記述するという本来のHTMLの目的
に反するため、文書の視覚的構造を規定する枠組みとして
CSSが新たに策定された。
インターネットの用語
