コンピュータ基礎実習(上級) 第二回 ウェブページの作成について 清水淳紀 ウェブページとは ウェブ(Web)は正式名称を World Wide Web という。 文字や画像、動画等を簡単に扱うことができる。 [リンク] を介してページ同士がつながっているのが特徴。 ページは 画像 ・ 動画 等 さまざまなファイルで構成されている 画像ファイル 背景だけでなく スイッチ等も画像 動画ファイル 動くスイッチやムービーなど ウェブページの保存場所 ウェブページは、[ウェブサーバー] と呼ばれるコンピュー タ上の場所に保存されている。 インターネット越しにページを見るときは、ページごとに 存在するアドレス(URL)を頼りにアクセスする。 ウェブサーバー URL http://xyz.com/page.html ページ閲覧者の パソコン インターネット ページの文字・画像 動画などが保存されている 作ったページはウェブサーバーに掲載(アップロード)しないと インターネットに公開されない！ 京都産業大学でのページ公開場所 ホームページアドレス(URL) http://www.cc.kyoto-su.ac.jp/~gXXXXXX/ gXXXXXXの部分は各自のユーザーID アップロード方法 学内からのアップロード 指定のフォルダにファイルをコピーする コンピュータ → gXXXXXX(ネットワークドライブ) → unix_home→public_html フォルダ内 学外からのアップロード FTP接続ツールを使ったアップロード (詳しくは学内ページの[コンピュータ環境の使い方] 参照) ※ FTPは学外のレンタルサーバーサービスなどでも よく使われる。 ページを公開するには ウェブサーバー上にある公開用の場所にファイルを置く。 一般的にはレンタルサーバーサービスなどを利用する。 公開したいページを作成し、ファイルをウェブサーバーに ウェブサーバー アップロードする。 所定の場所に 必要ファイルを アップロードする 好きなページを作成 ファイルもフォルダもアップロードできる ファイル数は数百に及ぶ場合もある ウェブページが表示される仕組み [HTML形式] という特殊な文法で入力をする。 HTMLファイルは xxxxx.html のようなファイル名を持つ。 Internet Explorer(IE)などに読み込ませるとウェブページ に整形されて表示される。 HTMLファイルの中身 IEに読み込ませて表示 HTMLを解釈できる(=ウェブページのデザインを表示できる)アプリケーションのことを [ブラウザ] という。 Internet Explorer や Firefox 、GoogleChrome などさまざまなブラウザがあるが 原則、表示される結果は同じ。 利用者の好みで選ぶことが多い。 HTMLではどんなことができるのか HTMLの主な機能 文字の表示と書式設定(色、大きさ 等) リンクで他のページと接続 画像や映像を表示 表の作成 (ページのレイアウトにも流用できる) HTMLは古い規格なので、できることは多くない。 HTMLで実現できないデザインや効果は、 画像や、HTML以外の他の技術を使って実現する必要がある。 例) Javascript や CSS (スタイルシート) など。 ウェブページ作成の手順 ページの作成・編集 メモ帳などでウェブページを作成。 HTML形式で編集する。 アップロードして公開 public_htmlフォルダにファイルをドラッグ。 結果の確認 アドレス(URL)を入力して動作確認する。 http://www.cc.kyoto-su.ac.jp/~gXXXXXX/ ページの作成 メモ帳などを利用してHTML形式のファイルを作成する。 保存時の注意 メモ帳の場合、[ファイルの種類]を[全てのファイル]に設定してから 保存すること。 こうしないとテキストファイルとして保存されてしまい、正しくウェブページ として解釈されない。 2回目以降に[上書き保存]する際は設定不要。 [全てのファイル] に設定する理由： メモ帳は初期設定では保存するファイルの拡張子が テキスト (.txt) になっていてHTMLファイルとして保存されない。 例えば index.html として保存するつもりが index.txt で保存されてしまい、ページとして読み込めない。 [全てのファイル]にすると、指定の拡張子(.html)で保存できる。 拡張子とは： ファイル名の最後に ドット(.)に続いて書かれるキーワード。(例) .html Windows や ウェブサーバーがファイルの種類を見分けるために使う。 ページの作成 ページを作成できるアプリケーションには さまざまなものがある メモ帳 Windowsなら標準装備。細かい修正をする際に役に立つ。 KompoZer (コンポーザー) 学内なら標準装備。無料のツール。 HTMLをある程度自動的に作成できるので便利。 IBMホームページビルダ 市販のツール。初心者向け。比較的有名。 Adobe Dreamweaver 市販のツール。プロデザイナーも使用する。 どのツールも基本的には HTMLを作成するのが目的である。 HTMLファイルを作る HTML文法の決まりを守っていれば 何を使って作成しても良い。 KompozerやWORDなどでも作成できるが 自由が効かず、細かな編集もしにくい。 細部はメモ帳で修正する必要があるかもしれない。 HTMLの詳細などはHTML解説ページなどを参照のこと。 基礎実習ホームページ内 HTML講座 http://www.cc.kyoto-su.ac.jp/~shimizu/MAKE_HTML/ HTMLクイックリファレンス http://www.htmq.com/ その他さまざまなサイトに解説あり。 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を処理できないことが多い。 ページの公開をする ページをインターネット上に公開するために ウェブサーバーにファイルをアップロードする。 アップロード方法(学内専用) [コンピュータ]→[g123456](ユーザーIDが書かれたフォルダ) →[unix_home]→[public_html] を開く。 作成したHTMLファイルをドラッグする。 注意 public_html フォルダに存在するファイルが 現在公開中のファイルとなる。 画像などページに必要なファイルがある場合は 関連ファイルを全てアップロードすること。 ページ内容の確認１ 作成したHTMLファイルを Internet Explorer(IE)で開いて 内容を確認 IEのウィンドウにHTMLファイルをドラッグして開く。 メモ帳などでHTMLを修正したら、[上書き保存]する。 IEで[最新の情報に更新] (キーボードの[F5]キー)を押すと、 修正内容が反映される。 保存はショートカットキー Ctrl+S で上書き保存 すると楽。 ページを修正しても、IEで画面を更新[F5] しないと、ブラウザの表示は変わらない。 ページ内容の確認２ ホームページアドレス(URL)を入力し、公開中のページ が正しく表示されているか確認する ホームページアドレス http://www.cc.kyoto-su.ac.jp/~g123456/ g123456の部分は各自のユーザーIDとなる 自分のページをお気に入りに 追加しておくと すばやくアクセスできて便利 必ずURLでアクセスして最終確認をしよう。 直接ファイルをダブルクリックするのと表示が異なる場合がある。 まとめ 作業の流れ ページの作成・編集 メモ帳などでウェブページを作成。 HTML形式で編集する。 アップロードして公開 public_htmlフォルダにファイルをドラッグ。 結果の確認 アドレス(URL)を入力して動作確認する。 http://www.cc.kyoto-su.ac.jp/~gXXXXXX/ 作業を簡単にするために ショートカットを作成する よく使うアプリケーションをすばやく起動でき便利 メモ帳 や Kompozer Internet Explorer public_htmlフォルダ ショートカット作成する方法 アイコンをマウスの右ボタンでドラッグし [ショートカットをここに作成] を選択 ショートカットとは • 実際のファイルの存在する 場所だけが記されたファイル。 • データの実体ではない。 • ディスク容量をほとんど消費 しない。 • アイコンに矢印が付くのが 目印。
© Copyright 2024 ExpyDoc
