神奈川県立総合教育センター Webページ作成講座
基礎知識 HTML 準備 ページ作成 画像処理 アップロード

Webページ作成講座
Webページ作成の目的
 教育の情報化が進み、学校からの情報発信が求められています。教育課程やシラバス、学校行事の案内や報告など様々なコンテンツをWebページで情報発信してみましょう。 また、教材用のWebページを作成すれば、授業で活用の推進にも役立てることができます。
Webページ作成の手順
管理サイクル
 Webページ作成は、一般に右図のような手順で進めます。Webページは公開すればそれで完成というものではありません。新しい情報を追加し、更新していくことが大切です。
Webページ作成で使われる用語
Webページ Webブラウザで一度に表示されるデータのまとまり。
Webサイト あるテーマでまとまった複数のWebページ。
Webブラウザ Webページを閲覧するためのソフトウェア。
ホームページ 本来はWebサイトのトップにあるページ、
または、ブラウザが起動した際に最初に現れるページの意味。
URL
(Uniform Resource Locator)
インターネットにおける情報の「住所」にあたるもの。
情報の種類やサーバ名、フォルダ名、ファイル名などで構成される。
HTML
(HyperText Markup Language)
Webページを記述するための言語。
タグ HTMLで扱われる属性情報< >でくくられた記号。
WWWサーバ(Webサーバ) Webページを配信する機能をもつコンピュータ。
FTP
(File Transfer Protocol)
ファイルを転送する時に使われるプロトコル(通信の取り決め)。
Webページ作成と情報モラル
Webサイトを開設する上で気を付けなくてはならないことがあります。

著作権  イラストや音楽などは制作者に著作権があります。一般的に、著作者に無断でイラストや音楽をWebページに貼りつけてはいけません。
個人情報の保護  個人名や個人の住所、電話番号をWebページに掲載すると悪用されることがあるので載せないようにします。
肖像権  個人を識別できるような写真を本人に無断でWebページに掲載してはいけません。
有害情報等  Webページに猥褻なもの、暴力や犯罪につながる情報、差別的な内容が含まれないように注意します。
多くの人に見てもらうための工夫
○統一されたテーマカラー、コンセプト
 Webサイト全体で統一されたコンセプト、テーマカラーがあるとまとまった感じが出ます。思いつきで色々なカラーを使うと落ち着きのないページになってしまいます。
○アクセシビリティ、バリアフリー、ユニバーサルデザイン
 通信機器の性能や通信速度の違いがあっても、また、高齢者や障害のある人にとっても、利用しやすいWebページ作りをめざします。
 音声読み上げブラウザを利用している場合や、キーボードだけで操作している場合もあります。また、色だけで識別する表現をしないなど、すべての人が利用しやすいWebページ作りを心がけます。
○更新頻度
 更新されていないWebサイトは訪問者が減ってきます。情報は新しさが重要です。
Webページ作成に必要なもの
○PC 
高性能なコンピュータでなくてもWebページは作成できます。
○ディスクスペース
 Webページを公開するためにはWebサーバが必要です。
サーバ管理者からサーバ名、ユーザ(アカウント)名、パスワードなどの情報を手に入れておきます。
○Webページ作成ソフトウェア
 市販されているソフトウェア、フリーソフト、シェアウェアなど様々な種類があります。
Windowsに付属の「メモ帳」でも作成できます。
○画像処理ソフトウェア
 市販されている画像処理ソフトウェアがあると便利です。Webページ作成ソフトウェアに画像処理機能が付属している場合もあります。
○ファイル転送(FTP)ソフトウェア 
フリーソフト、シェアウェアに優れたFTPソフトウェアがたくさんあります。
○デジタルカメラ
Webページ作成用ならば、高解像度でなくても十分に使えます。
○イメージスキャナ 
写真などをデジタルデータに変換する場合に使います。
ファイル名、ファイルの種類について
フォルダの中身○フォルダオプションの設定で拡張子を表示させておく
 Webページはファイル名に「.htm」「.gif」「.jpeg」といった拡張子がついたファイルからできています。それらのファイルを保存するフォルダを新規作成し、そのフォルダの「フォルダオプション」〜「表示」〜「登録されている拡張子を表示しない」のチェックを外し、拡張子が表示されるようにします。(右図:Webページを保存しているフォルダの中身)
○全角文字や日本語のファイル名は使えない
 ファイル名にはa〜z、A〜Z、0〜9の半角英数字と -(ハイフン)、_(アンダーバー)しか使えません。また、全角文字、ローマ数字、丸数字、半角カタカナはファイル名に使えません。

(例)×自己紹介.htm  ×PROFILE.HTM
  ○profile.htm 
○ファイル名の大文字と小文字はサーバで区別される
 Windowsを使うコンピュータではファイル名の大文字と小文字は区別されませんが、WWWサーバでは区別される場合が多いので、どちらかに統一するようにしましょう。今回の講座では小文字に統一していきます。
○Webページファイルの拡張子は.htmlまたは.htm
 ファイル名のうち、ピリオドで区切られた右の部分を拡張子といい、Webページのファイルは「.html」または「.htm」になります。
○index.htm(またはindex.html)は特別なファイル名
 index.htm(またはindex.html)というファイル名は特別な意味を持ちます。ブラウザでURLのファイル名を省略した場合index.htm(またはindex.html)が表示されます。
○画像のファイル形式 
 Webページに貼ることができる画像のファイル形式はGIF形式、JPEG形式、PNG形式などです。
 
基礎知識 HTML 準備 ページ作成 画像処理 アップロード
神奈川県立総合教育センター Webページ作成講座