県立広島大学 全学共通教育科目 情報処理入門 第13回 2009年7月6日 県立広島大学 経営情報学部経営情報学科 准教授 小川 仁士
目次 ★ 第13回 講義ノート Webページ（ホームページ）公開手順 無料サービスを利用した公開(A) 学内サーバーによる公開(B) ★ 第13回 講義ノート Webページ（ホームページ）公開手順 無料サービスを利用した公開(A) 学内サーバーによる公開(B) Webページ（ホームページ）作成演習（２） ★ 第13回 演習課題
Yahooが提供している無料サービスによるホームページ公開手順 ( http://geocities.yahoo.co.jp/ ) Yahoo!ジオシティーズのtop page すでにジオシティーズでPageをもっている人 初めてジオシティーズでWebPage公開を行う人
ホームページ公開手順(A-2) Home Page公開作業の流れ Yahoo! Japan IDの取得 開設の申し込み ホームページの作成 アップロードして公開
ホームページ公開手順(A-3) Login 画面 login ID 取得へ
（file管理、fileアップロードなど） ホームページ公開手順(A-4) URL選択・ジャンル の選択など (Pageの初期設定) Home Page作成 テンプレートをジオクリエーターで編集 ジオクリエーターで自由に作成 ジオログで埋め込む ジオシティーズのツール活用 （file管理、fileアップロードなど）
ジオシティーズのツール：ジオクリエーター(A-5) ソース表示 Web形式で表示
ジオシティーズのツール：ファイルマネージャ(A-6) ファイルマネージャ Editor 選択 ファイルやディレクトリの管理や修正ができます。またエディタを選んで、その場でHTMLファイルの作成や編集が可能です。エディタはファイルマネージャ画面右上のプルダウンメニューから、「ジオクリエーター」と「アドバンストHTMLエディタ」を選択できます。通常は「利用するエディタ」として「アドバンストHTMLエディタ」が選択されています。 File/処理選択 Subfolder管理 File upload
学内サーバー： orion.galaxy.pu-hiroshima.ac.jp サーバーのファイル構造： ホームページ公開(B) 学内サーバー： orion.galaxy.pu-hiroshima.ac.jp サーバーのファイル構造： Webpage sources (index.html,etc) p90xxxma public_html Webpage sources (index.html,etc) usr home p90xxxit public_html ・ ・ ・ Webpage sources (index.html,etc) xiao public_html URL: http://orion.galaxy.pu-hiroshima.ac.jp/p90xxxit/
ホームページファイルの upload / download ホームページ公開(B) ホームページファイルの upload / download 学内LAN orion Upload/down load tool: FFFTP index.html flower.jpg, test.pdf …
FFFTP起動：<スタート> <すべてのプログラム> <FFFTP> ホームページ公開手順(B-1) FFFTP起動：<スタート> <すべてのプログラム> <FFFTP> クリックし、ホスト名等を入力 初期画面
ホームページ公開手順(B-2) 接続情報入力：ホスト名、ID, PW 注）PWはホストの設定に含めず、空欄にしておきましょう ・PWの初期値は、演習室のIDと同じ文字列を設定しています ・PWの変更方法については、配布ファイル“学内サーバのパスワード変更手引き.pdf”を参照してください クリックするとホスト一覧に学内サーバが登録されます
ホームページ公開手順(B-3) データ転送画面 ツールバーを確認 PCフォルダとサーバーフォルダを確認 PC側 サーバー側
データ転送実行（drag&dropで実行） ホームページ公開手順(B-4) データ転送実行（drag&dropで実行） 転送ファイルフォルダ 転送先フォルダ
ホームページ公開手順(B-5) 転送結果の確認 自分のID Homepage： http://orion.galaxy.pu-hiroshima.ac.jp/p90XXXXXX/ が見えるか？ 自分のID
Webページ（ホームページ）作成(タグ演習) 今日演習するタグ 予約文字を表わす方法 強調 画像表示 リンク（他のページへのリンク、ページ内リンクなど） その他参考となるタグ（横罫線、上付き、下付き）
予約文字の表示 予約文字の表示（教科書レッスン14、P53右上のヒント欄） 「<」、 「>」、「"」、「&」 半角の左カッコ（<）、半角の右カッコ（>）、"、& 「 」 文章中の連続した半角のスペースは、1文字分しか有効にならない。連続した半角スペースを表示したいときに利用する 参考：特殊文字 「©」：著作権表示 「♥」：ハートマーク、「♣」：クラブマーク、「♦」：ダイアマーク、「♠」スペードマーク
予約文字の表示 予約文字を表示する記述例 配布用フォルダから「index-reserved.html」を作業フォルダへコピーする <body> <p> HTML文書の中で「<」はタグを表わす印となる。本来の文字「<」として使いたい場合には、「<」と入力する。右カッコの「>」は、「>」である。 </p> 同様に「&」は「&」を用いる。 文章中の連続した半角のスペースは、1文字分しか有効に ならない。連続した半角スペースを利用する場合には、「 」を利用する。3文字スペースを挿入 しました。 </body> 配布用フォルダから「index-reserved.html」を作業フォルダへコピーする ブラウザで表示し、ソースと見比べて確認する
強調タグ テキストの強調（教科書レッスン16） <em> 「強調」したい文章を<em>と</em>で囲む <strong> 強調したい文章を<strong>と</strong>で囲む <em>よりもさらに強い強調 たいていのブラウザで該当箇所が「斜体」や「太字」で表現されるようになる。しかし「強調」に対してどのような処理を行うかはブラウザとその設定によって異なる テキストエディタで「index.html」を開き、教科書を見ながら編集を加える ブラウザで確認する
画像表示 画像ファイルの表示（教科書レッスン43） <img src="xxxx" alt="yyyy" width="aaa" height="bbb"> 画像を表示したい時に用いる src オプションで読み込む画像ファイルの名前を指定する alt オプションで画像が表示できなかった場合に表示されるタイトルを指定する（視覚障害を持つユーザ、テキストのみを表示するブラウザなど） 最低限「src」オプションのみの指定で表示できるが、なるべくaltオプションも指定する width, height オプションは、画像を表示するサイズをピクセル単位で指定する 注意：画像ファイルの保存されている場所と、HTMLファイルの場所の関係を正確に記述する必要がある 配布用フォルダから「baron.jpg」を作業フォルダへコピーする テキストエディタで「index.html」を開き、教科書を見ながら編集を加える ブラウザで確認する
リンク リンク（教科書レッスン18～19） <a href="xxxxxxxx"> <a href="xxxxxxxx"> </a>で囲まれた場所は、「リンク」と呼ばれる機能を持つ。具体的な機能は、他のページへのリンク、同一ページ内の別の場所へのリンク、他のファイル（画像ファイル、PDFファイルなど）へのリンク、メール送信等
他のページへのリンク 他のホームページへのリンクの設定例（教科書レッスン20） <body> <p> このページでは県立広島大学についての情報発信をしています。 </p> <a href="http://www.pu-hiroshima.ac.jp/">県立広島大学のホームページ</a>へ </body> テキストエディタで「index.html」を開き、教科書を見ながら編集を加える 注）海上公園のURLは、“～or.jp～”から“～co.jp～”に変わっています。 ブラウザで確認する
同一ページ内へのリンク 同じページ内のリンク設定例（教科書レッスン21） <body> <p> 部活のページは<a href="#bukatsu">ここ</a>です。 </p> ようこそ<a name="bukatsu">部活のページへ！</a> </body> ・ 途中にいろいろと記述がある テキストエディタで「index.html」を開き、教科書を見ながら編集を加える ブラウザで確認する
メールへのリンク メールへのリンクの設定例（教科書レッスン２２） <body> <p> このページでは県立広島大学についての情報発信をしています。 </p> このページについてのお問い合わせは、 <a href="mailto:hogawa@pu-hirorhima.ac.jp">ページ管理者</a>まで </body> 送信してもらいたい宛先アドレスを記入する （例では小川のアドレスを記入している） テキストエディタで「index.html」を開き、教科書を見ながら編集を加える ブラウザで確認する
ファイルへのリンク ファイルへのリンクの設定例（教科書のレッスン番外） <body> <p> 弊社の概要について、参考資料を用意いたしましたので、ご覧いただければ幸いです。 </p> <a href="Mod_Chp4.pdf">参考資料（PDF:172kByte）</a> </body> 配布用フォルダから「index-filelink1.html」を作業フォルダへコピーする ブラウザで表示し、ソースと見比べて確認する
Webページ（ホームページ）作成演習３（16） ファイルへのリンク 画像ファイルへのリンクの設定例（教科書のレッスン番外） <body> <p> 今月の<a href ="flower.jpg">テーマフラワー</a>の画像です。 </p> </body> 配布用フォルダから「index-filelink2.html」を作業フォルダへコピーする ブラウザで表示し、ソースと見比べて確認する
その他参考になるタグ 横罫線、上付き、下付きテキスト（教科書のレッスン番外） <hr> 横に罫線を引く 同じページ内で区切りを表わすときなどに利用する 終了タグはなく、単独で用いられる <sub>と</sub>で囲む 囲んだ文字列が下付き文字で表示される <sup>と</sup>で囲む 囲んだ文字列が上付き文字で表示される 配布用フォルダから「index-other.html」を作業フォルダへコピーする ブラウザで表示し、ソースと見比べて確認する
第13回 演習課題 HTML作成練習（2） ■ 「架空の自己紹介」をホームページにしてみる（続き） 第13回 演習課題 HTML作成練習（2） ■ 「架空の自己紹介」をホームページにしてみる（続き） 自己紹介のホームページをグレードアップし、次回の授業の始まりまでに提出する。 完成したｈｔｍｌファイルとリンクを張った画像ファイル等はサブフォルダ内にまとめ、サブフォルダごとＹドライブの提出用フォルダへコピーして提出する。（クラスを間違えないように） （サブフォルダ名およびファイル名は、ユーザIDで区別する） 例：サブフォルダ名 P901099XX （すべて半角英数字で） ｈｔｍｌファイル名 P901099XX-HTML2.html （メインページからリンクを張った画像ファイル等のファイル名は半角英数字の文字列であれば好きに名付けてよい） 今日紹介したタグを最大限に活用すること！
参考：Word書類上の図の再利用 Word書類上の図や写真のHTMLでの再利用 HTMLで利用するため、単独の画像ファイルにする いくつか方法がありますが、Windowsに標準で添付されている「ペイント」を利用するのが一番簡単です 「スタート」から「すべてのプログラム」、「アクセサリ」とたどり、「ペイント」を起動する 「変形」メニューから、「キャンパスの色とサイズ」を選択する 幅と高さを10ピクセル程度の非常に小さな値にする（貼り付けようとする図のサイズよりも小さくする） Word書類から、再利用したい図や写真をコピーする ペイント上で貼り付ける 「名前を付けて保存」を選択し、図の形式（ファイルの種類）を「JPEG」もしくは「GIF」に指定して保存する
情報処理入門 第13回 終 了