コンピュータ基礎実習 ( 上級 ) 第二回 ウェブページの作成について 清水淳紀. ウェブページとは  ウェブ (Web) は正式名称を World Wide Web という。  文字や画像、動画等を簡単に扱うことができる。  [ リンク ] を介してページ同士がつながっているのが 特徴。 ページは.

Presentation on theme: "コンピュータ基礎実習 ( 上級 ) 第二回 ウェブページの作成について 清水淳紀. ウェブページとは  ウェブ (Web) は正式名称を World Wide Web という。  文字や画像、動画等を簡単に扱うことができる。  [ リンク ] を介してページ同士がつながっているのが 特徴。 ページは."— Presentation transcript:

1 コンピュータ基礎実習 ( 上級 ) 第二回 ウェブページの作成について 清水淳紀

2 ウェブページとは  ウェブ (Web) は正式名称を World Wide Web という。  文字や画像、動画等を簡単に扱うことができる。  [ リンク ] を介してページ同士がつながっているのが 特徴。 ページは 画像 ・ 動画 等 さまざまなファイルで構成されている 画像ファイル 背景だけでなく スイッチ等も画像 動画ファイル 動くスイッチやムービーなど

3 ウェブページの保存場所  ウェブページは、 [ ウェブサーバー ] と呼ばれるコン ピュータ上の場所に保存されている。  インターネット越しにページを見るときは、ページ ごとに存在するアドレス (URL) を頼りにアクセスする。 ページ閲覧者の パソコン ウェブサーバー URL http://xyz.com/page.html ページの文字・画像 動画などが保存されている 作ったページはウェブサーバーに掲載 ( アップロード ) しないと インターネットに公開されない！ インターネット

4 京都産業大学でのページ公開場所  ホームページアドレス (URL)  http://www.cc.kyoto-su.ac.jp/~gXXXXXX/ gXXXXXX の部分は各自のユーザー ID  アップロード方法  学内からのアップロード 指定のフォルダにファイルをコピーする コンピュータ → gXXXXXX( ネットワークドライブ ) → unix_home → public_html フォルダ内  学外からのアップロード FTP 接続ツールを使ったアップロード ( 詳しくは学内ページの [ コンピュータ環境の使い方 ] 参照 ) ※ FTP は学外のレンタルサーバーサービスなどでも よく使われる。

5 ページを公開するには  ウェブサーバー上にある公開用の場所にファイルを 置く。  一般的にはレンタルサーバーサービスなどを利用する。  公開したいページを作成し、ファイルをウェブサー バーに アップロードする。 好きなページを作成 ウェブサーバー 所定の場所に 必要ファイルを アップロードする ファイルもフォルダもアップロードできる ファイル数は数百に及ぶ場合もある

6 ウェブページが表示される仕組み  [HTML 形式 ] という特殊な文法で入力をする。  HTML ファイルは xxxxx.html のようなファイル名を 持つ。  Internet Explorer(IE) などに読み込ませるとウェブペー ジに整形されて表示される。 HTML ファイルの中身 IE に読み込ませて表示 HTML を解釈できる (= ウェブページのデザインを表示できる ) アプリケーションの ことを [ ブラウザ ] [ ブラウザ ] という。 Internet Explorer や Firefox 、 GoogleChrome などさまざまなブラウザがあるが 原則、表示される結果は同じ。 利用者の好みで選ぶことが多い。

7 HTML ではどんなことができるのか  HTML の主な機能  文字の表示と書式設定 ( 色、大きさ 等 )  リンクで他のページと接続  画像や映像を表示  表の作成 ( ページのレイアウトにも流用できる ) HTML は古い規格なので、できることは多くない。 HTML で実現できないデザインや効果は、 画像や、 HTML 以外の他の技術を使って実現する必要がある。 例 ) Javascript や CSS ( スタイルシート ) など。

8 ウェブページ作成の手順 ページの作成・編集 アップロードして公開 結果の確認 メモ帳などでウェブページを作成。 HTML 形式で編集する。 public_html フォルダにファイルをドラッグ。 アドレス (URL) を入力して動作確認する。 http://www.cc.kyoto-su.ac.jp/~gXXXXXX/

9 ページの作成  メモ帳などを利用して HTML 形式のファイルを作成 する。  保存時の注意  メモ帳全てのファイル  メモ帳の場合、 [ ファイルの種類 ] を [ 全てのファイル ] に設定して から保存すること。  こうしないとテキストファイルとして保存されてしまい、正しく ウェブページとして解釈されない。  2 回目以降に [ 上書き保存 ] する際は設定不要。 [ 全てのファイル ] に設定する理由： メモ帳は初期設定では保存するファイルの拡張子が テキスト (.txt) になっていて HTML ファイルとして保存されない。 例えば index.html として保存するつもりが index.txt で保存されてしまい、ページとして読み込めない。 [ 全てのファイル ] にすると、指定の拡張子 (.html) で保存できる。 拡張子とは： ファイル名の最後に ドット (.) に続いて書かれるキーワード。 ( 例 ).html Windows や ウェブサーバーがファイルの種類を見分けるために 使う。

10 ページの作成  ページを作成できるアプリケーションには さまざまなものがある  メモ帳 Windows なら標準装備。細かい修正をする際に役に立つ。  KompoZer ( コンポーザー ) 学内なら標準装備。無料のツール。 HTML をある程度自動的に作成できるので便利。  IBM ホームページビルダ 市販のツール。初心者向け。比較的有名。  Adobe Dreamweaver 市販のツール。プロデザイナーも使用する。  どのツールも基本的には HTML を作成するのが目的である。

11 HTML ファイルを作る  HTML 文法の決まりを守っていれば 何を使って作成しても良い。  Kompozer や WORD などでも作成できるが 自由が効かず、細かな編集もしにくい。  細部はメモ帳で修正する必要があるかもしれない。  HTML の詳細などは HTML 解説ページなどを参照のこ と。  基礎実習ホームページ内 HTML 講座 http://www.cc.kyoto-su.ac.jp/~shimizu/MAKE_HTML/  HTML クイックリファレンス http://www.htmq.com/ その他さまざまなサイトに解説あ り。

12 HTML ファイルのファイル名に注意！  ファイル名には半角英数文字のみを使用すること。  a~z 0 ～ 9 ハイフン (-) 等を使うのが無難。 memo.html toiawase.html list-12.html など。  半角英数文字以外を使うと 正しくアクセスできないかも。  画像ファイル等の名前も同様に半角英数を使うこと。  最初のページのファイル名は index.html とする。  http://xxxxx.com/abc.html のようにファイル名を指定すると abc.html が読み込まれるが、 http://xxxxx.com/ のようにファイル名を省略すると index.html が自動で読み込まれる。 ( ウェブサーバー暗黙の了 解） ファイル名に全角が使えない理由： 英語文化圏などでは、全角文字は存在しないので、 全世界的なサービスを行うウェブサーバーでは 全角文字を含む URL を処理できないことが多い。

13 ページの公開をする アップロード  ページをインターネット上に公開するために ウェブサーバーにファイルをアップロードする。  アップロード方法 ( 学内専用 )  [ コンピュータ ] → [g123456] ( ユーザー ID が書かれたフォルダ ) → [unix_home] → [public_html] を開く。  作成した HTML ファイルをドラッグする。  注意  public_html フォルダに存在するファイルが 現在公開中のファイルとなる。 全てアップロード  画像などページに必要なファイルがある場合は 関連ファイルを全てアップロードすること。

14 ページ内容の確認１  作成した HTML ファイルを Internet Explorer(IE) で開い て内容を確認  IE のウィンドウに HTML ファイルをドラッグして開く。  メモ帳などで HTML を修正したら、 [ 上書き保存 ] する。  IE で [ 最新の情報に更新 ] ( キーボードの [F5] キー ) を押すと、 修正内容が反映される。 保存はショートカットキー Ctrl+S で上書き保存 する と楽。 ページを修正しても、 IE で画面を更新 [F5] しないと、ブラウザの表示は変わらない。

15 ページ内容の確認２  ホームページアドレス (URL) を入力し、公開中のペー ジが正しく表示されているか確認する  ホームページアドレス http://www.cc.kyoto-su.ac.jp/~g123456/ g123456 の部分は各自のユーザー ID となる  自分のページをお気に入りに 追加しておくと すばやくアクセスできて便利 URL でアクセスして最終確認 必ず URL でアクセスして最終確認をしよう。 直接ファイルをダブルクリックするのと表示が異なる場合がある。

16 まとめ 作業の流れ ページの作成・編集 アップロードして公開 結果の確認 メモ帳などでウェブページを作成。 HTML 形式で編集する。 public_html フォルダにファイルをドラッグ。 アドレス (URL) を入力して動作確認する。 http://www.cc.kyoto-su.ac.jp/~gXXXXXX/

17 作業を簡単にするために  ショートカットを作成する  よく使うアプリケーションをすばやく起動でき便利  メモ帳 や Kompozer  Internet Explorer  public_html フォルダ  ショートカット作成する方法 右ボタン ショートカットをここに作成  アイコンをマウスの右ボタンでドラッグし [ ショートカットをここに作成 ] を選択 ショートカットとは 実際のファイルの存在する 場所だけが記されたファイ ル。 データの実体ではない。 ディスク容量をほとんど消 費しない。 アイコンに矢印が付くのが 目印。