1 2 3 図 4 図 5?? 部 分 は, 各 自 が 用 意 したメディアに 合 わせて 選 択 する (5) 画 面 の 指 示 に 従 い 作 業 を 進 め, 最 後 までできれば,メール 環 境 の 構 築 は 終 了 うまくいかない 場 合, 学 術 情 報 センターで 指 導 を 受

13.パーソナルコンピュータ 実 習 [Ⅱ] 実 験 受 講 前 の 準 備 編 以 下 の 確 認 を 行 っていない 場 合,この 実 験 テー マを 受 講 することはできません 1. 学 情 センターの UNIX のパスワードの 確 認 2.E-Mail が 使 えることを 確 認 手 順 1(UNIX パスワードの 確 認 ) (1) 中 部 大 学 内 のパソコンで FFFTP を 立 ち 上 げる ( 図 1) (2) ホスト 一 覧 が 現 れるが 閉 じる ( 図 2) (3)ツールバーから 接 続 を 左 クリックし, クイック 接 続 を 左 クリッ クする ( 図 3) ( 4 ) 1 ホ ス ト 名 に lion.lesson.isc.chubu.ac.jp も し く は luna.lesson.isc.chubu.ac.jp と 入 力 し,2 ユーザー 名 に 自 分 の 学 籍 番 号 を 入 力 し,3 パスワード にパスワードを 入 力 し( 図 4), OK を 左 クリックする (5) 右 側 上 部 に 自 分 の 学 籍 番 号, 右 側 のファイルの 一 覧 が 現 れる ( 図 5 の 赤 枠 線 内 ) 図 5 のように,ファイルのリストが 表 示 されたら OK です (UNIX パスワードの 確 認 は 終 了 ) 図 1 ダ ブ ル ク リ ッ ク 表 示 されない 場 合 には,パスワードの 再 発 行 ( 後 述 )が 必 要 です 手 順 2(E-Mail の 環 境 構 築 ) 中 部 大 学 内 のパソコンからメールを 送 ることができれば OK メールが 送 れない 場 合, 以 下 の 手 順 でメール 環 境 を 構 築 しておく (1)E-Mail 用 フロッピーディスク,MO デ ィスク,もしくは CD-R を 用 意 する (2) 中 部 大 学 内 のパソコンを 立 ち 上 げる (3) 図 6 のように, スタート プログラム AL-Mail32 と 辿 る (4) メール 環 境 設 定 (??) を 左 クリッ クする 左 クリック 図 2 1. 左 クリック 2. 左 クリック 図 3 13 - 補 1

1 2 3 図 4 図 5?? 部 分 は, 各 自 が 用 意 したメディアに 合 わせて 選 択 する (5) 画 面 の 指 示 に 従 い 作 業 を 進 め, 最 後 までできれば,メール 環 境 の 構 築 は 終 了 うまくいかない 場 合, 学 術 情 報 センターで 指 導 を 受 けておくこと パスワードの 再 発 行 手 続 きについて; 学 術 情 報 センターで 再 発 行 手 続 を 行 える 手 続 は, 毎 週 水 曜 日 12:40~13:30 学 術 情 報 センター 受 付 手 続 には 学 生 証 が 必 要 です 13 - 補 2

13.パーソナルコンピュータ 実 習 [Ⅱ] 本 編 1. 実 験 の 目 的 受 講 生 一 人 一 人 がパソコンを 使 い,ホームページ( 以 下,HP と 略 記 )を 作 成 することを 通 し て,インターネットの 仕 組 み,ネチケット,HTML(Hyper Text Markup Language)の 理 解,エ ディタの 使 用 法 などを 習 得 する 2. 実 験 の 概 要 (2-1)インターネットについて 多 くの 人 が 一 般 に インターネット と 呼 んでいる 言 葉 には, 電 気 的 な 通 信 網 のひとつの 方 式 の 意 味 で 使 う 場 合 と, この 通 信 網 上 で 特 定 の 約 束 をした 情 報 を 閲 覧 すること の 意 味 で 使 う 場 合 とがあるようです この 実 験 テーマでは, 後 者 の 特 定 の 約 束 をした 情 報 を 作 成 し,その 動 作 の 基 本 などを 理 解 することを 目 的 としています また,インターネットにパソコンが 接 続 されて いる 場 合 の 状 況 を 把 握 する 方 法 を 実 習 してもらいます (2-2)HTML について 上 記 では 回 りくどい 表 現 をしましたが,この 特 定 の 約 束 をした 情 報 が HTML(Hyper Text Markup Language) という 約 束 で 書 かれていて,これを ブラウザ と 呼 ばれるソフトで 読 み 込 むと 画 面 に 情 報 が 表 示 される 仕 組 みになっています この HTML 文 書 は,もともとは 文 字 列 のみで 作 成 されていましたが, 仕 様 が 拡 張 され, 画 像 ( 静 止 画 動 画 )の 表 示 ( 再 生 ), 音 声 など 図 6 13-1

も 再 生 できるようになっています 実 際 に HTML 文 書 を 各 自 で 作 成 していきます (2-3)ブラウザについて ブラウザ として, 現 在,Microsoft 社 製 Internet Explorer( 以 下,IE と 略 記 ) と Netscape 社 製 Netscape が 主 流 となっているようです 特 に,Microsoft 社 製 Windows シリーズでは IE が 標 準 でついてきますので,ここでも IE の 使 い 方 なども 解 説 しています (2-4)ネチケットについて HP は 基 本 的 に 誰 でもが 自 由 に 閲 覧 できます 従 って, 各 自 が 自 分 の 知 っている 情 報 を HP に 掲 載 し,お 互 いに 見 せ 合 えば, 膨 大 な 情 報 をお 互 いに 共 有 することができます しかし, 何 でもか んでも 良 いというわけではありません そこには 社 会 通 念 や 法 律 があり,お 互 いに 気 持 ちよく 利 用 できるよう 配 慮 することが 必 須 となります 特 に 最 近 問 題 となっているのは, 1 著 作 権 などの 他 人 の 権 利 に 関 する 事 項 2 誹 謗 や 中 傷 といった 事 項 3 他 人 の 情 報 公 開 などなど 多 くの 問 題 が 取 り 上 げられています 特 に, 個 人 情 報 の 発 信 と 著 作 権 には 十 分 すぎるぐ らいの 配 慮 があっても 足 りない 場 合 が 多 いと 思 います この 実 習 ではこれらについても 理 解 を 深 めてもらいたいと 思 います 3. 課 題 とレポート (3-1) 課 題 以 上 の 概 要 を 理 解 してもらうために, 受 講 生 毎 に 以 下 の 課 題 をこなしてもらいます 課 題 1 パソコンのネットワーク 接 続 状 況 を 調 べた 結 果 をまとめる 課 題 2 このプリントに 掲 載 の HP を 作 成 する ( 多 少 のアレンジは OK) 課 題 3 各 自 でテーマを 決 めた HP を 作 成 する トップページのファイル 名 を ( 学 籍 番 号 ).html とすること ファイル 名 に 全 角 文 字 は 使 わないこと 課 題 4 ネットワークに 関 係 する 事 項 ( 歴 史, 現 状, 今 後 の 予 測, 技 術 の 解 説, 最 近 のト ピック 等 など)を 図 書 館 で 調 べ,まとめる 課 題 5 E-Mail で 課 題 3 の 全 ファイルを 指 定 のアドレスに 送 る (3-2)レポートの 内 容 など 実 験 レポートは, 他 のテーマのレポートと 異 なり, 以 下 の 形 式 とします 1. 目 的 :このプリント 参 照 2. 課 題 1 の 結 果 : 各 自 が 使 ったパソコンのネットワークへの 接 続 状 況 をまとめる 3. 課 題 2 の 結 果 :HP のカラープリント 結 果 とソースファイル 4. 課 題 3 の 結 果 :HP のカラープリント 結 果 とソース カラープリント 結 果 は, 各 課 題 とも,A4 用 紙 2 枚 以 内 とする 5. 課 題 3 の 宣 伝 文 書 ( 作 成 意 図, 工 夫 箇 所 などを,A4 レポート 用 紙 1 枚 程 度 に 要 領 よくま とめる) 6. 課 題 4 の 結 果 :A4 レポート 用 紙 2 枚 以 上 に 調 査 結 果 をまとめる HP からの 引 用 はだめ 7.この 実 験 テーマに 対 する 意 見 感 想 (A4 レポート 用 紙 1 枚 程 度 ) (3-3) 採 点 について 課 題 3 の HP の 出 来 栄 えはもちろんのこと, 今 回 作 成 した HP をレポート 中 でいかに 宣 伝 する かが 採 点 基 準 となります つまり, 自 分 で 作 った HP を 売 り 込 むための 内 容 のレポートを 作 成 してください 採 点 者 は この HP ならいくらで 買 うか を 判 断 し,レポートの 評 点 とします また, 課 題 4 の 調 査 結 果 も 重 要 です 13-2

(3-4) 課 題 3 の 取 り 扱 いについて 各 自 が 作 った 課 題 3 の 全 ファイルを 添 付 ファイルとして, 以 下 のメールアドレスに E-Mail で 送 ってください パスワード 付 で 電 気 工 学 科 の HP に 掲 載 します 詳 しくは 実 験 時 に 聞 いてください 4. 課 題 1 の 実 施 今, 目 の 前 にあるパソコンが,ネットワークにどのように 接 続 されているのかを 調 べます 以 下 の 手 順 で 調 べますので, 画 面 に 表 示 された 内 容 をメモし,まとめてください わからない 用 語 は 各 自 調 べてください (1) スタート を 左 クリックし, ファイル 名 を 指 定 して 実 行 を 左 クリックする ( 図 4-1) 図 4-1 (2) 名 前 欄 にキーボードから cmd ( 大 文 字 でも 小 文 字 でも 可 )と 入 力 し, OK を 左 クリックする ( 図 4-2) (3) コマンドプロンプト と 呼 ばれる 画 面 が 表 示 される この 画 面 は,パソコンが 普 及 した 初 期 の 頃 よく 使 われて いた OS の MS-DOS の 画 面 と 同 じ 基 本 的 に,キー ボードからコマンド(= 命 令 )を 入 力 していく ( 図 4 図 4-2 -3) (4) 表 1 のコマンドを 順 次 入 力 し, 結 果 欄 に 結 果 をノートなどに 記 録 する (5) 表 示 された 内 容 はどうい う 意 味 かできるだけ 詳 しく 表 1 課 題 1 調 べ,レポートにまとめる コマンド オプシ 結 果 解 説 ョン ネットワークにつ net view ながっているパソ コンの 一 覧 ネットワークへの ipconfig /all 接 続 状 況 図 4-3 13-3

5. 課 題 2 の 実 施 (5-1) 作 成 に 先 立 って HP を 作 成 するには HTML という,いわゆる ソースファイル を 作 成 する 必 要 があります HTML を 作 成 するには,1HTML を 直 接 記 述 する 方 法,2いわゆる HP ビルダー などのソフ トを 使 って 作 成 する 方 法 があります 2の 方 法 は,HP の 完 成 画 面 を 作 成 すると HTML を 自 動 的 に 作 成 してくれて, 大 変 便 利 です 複 雑 な HP を 作 成 する 場 合 には 強 力 なツールとなります が,HTML そのものを 勉 強 するには 不 向 きな 場 合 が 多 いようです そこで,この 実 験 テーマでは,HTML の 基 礎 を 習 得 するために, 上 記 1の HTML を 直 接 記 述 する 方 法 を 説 明 し, 課 題 1 および 課 題 2 ともに HTML を 直 接 記 述 する 方 法 で 作 成 すること とします Microsoft Windows には Notepad(ノートパッド) が 付 属 していますので,これを 利 用 するの も 一 案 です しかし, 少 々 機 能 的 に 劣 りますので, 将 来,プログラムの 作 成 などを 行 う 場 合 など も 勘 案 すると,やはり エディタ を 勉 強 するのがよいと 考 えられます ここでは,フリーソフ トの TeraPad(テラパッド) を 使 って HTML 文 書 を 作 り,HP の 作 成 を 行 っていくこととしま す 以 降 の 図 表 が 見 にくい 場 合 には, 実 験 の HP を 参 照 してください (5-2) 具 体 的 な 手 順 (1)TeraPad を 起 動 します スタート を 左 クリック プログラム にマウスカーソルを 合 わせる(ポイントする) 右 側 に 現 れたメニューの TeraPad をポイントする さらに 右 側 に 現 れたメニューの TeraPad を 左 クリックする TeraPad が 起 動 する ( 図 5-1) 13-4

図 5-1 TeraPad の 起 動 直 後 の 画 面 (5-3)TeraPad の 初 期 設 定 ここでは,TeraPad の 設 定 を 今 回 の 課 題 達 成 に 便 利 なように 変 更 します TeraPad 特 有 の 設 定 な ので, 他 のソフトでは 設 定 できないものもあります なお, 学 情 センターのパソコンでは, 以 下 の 設 定 を 毎 回 行 う 必 要 がありますが, 必 ず 行 わなくてはならない というわけではありません (1) 編 集 モードを HTML にする TeraPad では HTML 文 書 を 作 る 手 助 けをしてくれる 機 能 がついているので,この 機 能 を 有 効 にします ( 図 5-2) 表 示 を 左 クリック 編 集 モード をポイント HTML を 左 クリック キーボードから,Alt+V,Alt+M,Alt+H の 順 に 操 作 しても 同 じ (2) 画 面 表 示 幅 を 変 更 エディタでは,1 行 の 数 え 方 を 改 行 から 次 の 改 行 までを 1 行 とする 場 合 と,ウィンド ウ 幅 までを 1 行 とする 場 合 とがあります 改 行 から 次 の 改 行 までが 長 くなる 場 合 がある ので,ここでは,ウィンドウ 幅 内 の 80 桁 ( 半 角 文 字 数 80 文 字, 全 角 文 字 数 40 文 字 )で 折 り 返 して 表 示 させます ( 図 5-3) 表 示 を 左 クリック 13-5

80 桁 で 折 返 し を 左 クリック キーボードから,Alt+V,Alt+W もしくは,CTRL+SHIFT+W としても 同 じ 図 5-2 図 5-3 (3) 特 殊 文 字 の 表 示 HTML 文 書 では 全 角 のスペース, 半 角 のスペース,タブが 区 別 されます エディタの 画 面 で は 同 じスペース( 空 白 )なのですが,いざ HP を 表 示 すると 思 わぬ 結 果 となる 場 合 があります そこで,これらのスペース 文 字 を 表 示 させるようにします 表 示 (V)を 左 クリック オプション(O)を 左 クリック( 図 5-4) メニューが 現 れる ( 図 5-5) 表 示 タブを 左 クリック( 図 5-6) TAB マーク, 全 角 空 白 マーク, 半 角 空 白 マーク の 左 の を 左 クリック( 図 5-6) OK を 左 クリック 13-6

図 5-4 図 5-5 図 5-6 (5-4)HTML 文 書 の 入 力 ここでは,HTML 文 書 の 基 本 的 な 事 項 のみを 入 力 して 課 題 2 の HP を 完 成 させます 課 題 3 では 特 殊 スクリプト( 動 画 再 生,JAVA など)を 使 ってもよいですが, 著 作 権 やコンピュータウィルスには 十 分 注 意 してください また,いわゆる パクリ は 厳 禁 です (1) 基 本 的 な 書 式 の 入 力 ( 通 称 おまじない ) 図 5-7 のとおりに,キーボードから 入 力 する (すべて 半 角 文 字 であるが, 大 文 字 / 小 文 字 を 問 わない ) 以 下 に, 入 力 する 内 容 について 簡 単 に 解 説 します <html> HTML 文 書 の 始 まりを 意 味 します <head> HP のヘッダー 部 分 の 始 まり <title></title> HP のタイトルを 入 力 する 個 所 図 5-7 13-7

</head> <body> </body> </html> ヘッダー 部 分 の 終 わり 本 文 の 始 まり 本 文 の 終 わり HTML 文 書 の 終 わり 補 足 HTML 文 書 は,ごく 簡 単 に 言 うと, 普 通 の 文 書 の 中 に<>で 囲 まれた 文 字 列 を 挿 入 したもの となる <>で 囲 まれた 文 字 列 のことを タグ と 呼 び,ブラウザで 表 示 する 場 合 にいろいろな 動 作 ( 表 示 )をさせることができる また, 例 えば,<body>~</body>のように 対 になったも のが 多 く, 数 学 の 括 弧 のように 考 えるとよい タグの 種 類 はたくさんあり,また,<タグ オプション>のような 記 述 もある 巷 では タグ 辞 典 などが 販 売 されて いるので,こうした 辞 典 や 参 考 書 をぜひ 参 照 して, タグの 種 類 やオプションについても 見 識 を 深 め てほしい 図 5-7 が 基 本 形 ですので,いったん 保 存 します ファイル を 左 クリック 名 前 を 付 けて 保 存 を 左 クリック( 図 5-8) ここでは, 仮 に html.html というファイル 名 で 保 存 しておくので, ファイル 名 欄 に html.html と 入 力 ( 図 5-9)し, OK を 左 クリックする 図 5-8 図 5-9 (5-5)HP の 具 体 的 な 作 成 HP を 作 成 するにあたり,インターネットエクスプローラ( 以 下,IE)で 出 来 栄 えを 確 認 しな がら TeraPad で 入 力 していきます (5-4)で 作 成 した HP の 基 本 ページを 触 っていきますので, html.html として 保 存 した 基 本 ページを, test.html という 別 名 で 保 存 し, 以 降, test.html ファイルを 編 集 していきます 13-8

TeraPad で, ファイル 名 前 を 付 けて 保 存 test.html とする IE を 起 動 する ( 図 5-10) ディスクトップ 上 の マイドキュメント フォルダを 開 く ( 図 5-11) マイ ドキュメント フォルダ 内 にある test.html フ ァイルをドラッグし,IE の 上 へドロップする ( 図 5-12) IE に 切 り 替 える 何 も 表 示 されない test.html の 内 容 は 何 も 入 っていないので, 何 も 表 示 され ない のが 正 しい 表 示 となります 図 5-10 図 5-11 以 降,TeraPad で 入 力 保 存 IE でリロード 確 認 TeraPad で 修 正 入 力 保 存 と 繰 り 返 していき, 課 題 2 を 完 成 させます リロード(= 再 読 み 込 み)は 図 5-12 の 部 分 を 左 クリックする (1)ヘッダー 部 の 入 力 図 5-13 のように,<title></title>の 間 に 文 字 を 入 れます E03156 の 部 分 は 各 自 の 学 籍 番 号 を 入 力 してください 図 5-13 の 部 分 を 左 クリックします (もしくは,CTRL+S と 押 します) IE のリロードを 左 クリックします ( 図 5-12 の 部 分 ) 何 も 表 示 されませんが,どこか 変 わっていませんか? IE で お 気 に 入 り を 左 クリック お 気 に 入 りに 追 加 を 左 クリック( 図 5-14) ドラッグアンドドロップ 図 5-12 13-9

名 前 欄 に<title></title>の 間 に 入 力 した 文 字 列 が 入 ります (2) 本 文 の 入 力 -1 図 5-16 となるように 入 力 し, 上 書 き 保 存 IE で 確 認 (リロード) 図 5-16 と 図 5-17 との 比 較 から, 以 下 のことに 気 づいてください <font ></font>は 文 字 のサイズや 色 などを 変 更 できる 半 角 のスペースは 無 視 され る <hr>は 横 罫 線 を 引 く <br>は 強 制 改 行 TeraPad では 改 行 している のに,IE では 改 行 されない 図 5-14 図 5-13 図 5-15 図 5-16 13-10

図 5-17 図 5-18 13-11

図 5-19 このように, 比 較 することで, 自 分 の HP ファイルが 正 しいかどうかが 簡 単 に 分 かります (3) 本 文 の 入 力 -2 test.html をさらに 修 正 し,より 多 くの 基 本 的 なタグを 使 います また, 別 のページ test2.html を 作 成 し,ハイパーリンクを 設 定 します 図 5-18 のように test.html を 変 更 し, 保 存 します IE での 表 示 は 図 5-19 のようになります 図 5-20 のように test2.html を 作 成 し, 保 存 します IE での 表 示 は 図 5-20 のようになります test.html での 簡 単 な 解 説 <center>~</center> IE の 真 中 に 文 字 列 を 表 示 します <ul> 箇 条 書 きの 始 まり <li> 箇 条 書 きの 項 目 </ul> 箇 条 書 きの 終 わり <table ~> ~ </table> 表 <tr> <th> 題 目 </th><th> </th></tr> 表 の 項 目 部 分 <tr> <td> 項 目 </td><td> </td></tr> 表 の 1 行 分 993399 カラーコード 6 と 993399 は 適 当 に 変 えてみよう! <a href= ファイル 名 >~</a> ハイパーリンク test2.html の 簡 単 な 解 説 <img src= 画 像 ファイル 名 > 13-12

図 5-20 図 5-21 13-13

(4) 本 文 の 入 力 -3 以 上 のタグを 使 えば,まあまあそれなりのページの 作 成 ができますが,さらに 高 度 な 内 容 とし て, JAVA スクリプト を 入 れ,より 高 度 な HP 作 成 に 取 り 組 みます 文 法 の 詳 細 は 省 略 します が, 以 下 のとおりに 入 力 し, 動 作 を 確 認 してみてください test.html の 変 更 ( 図 5-22) 4 行 目 ~ JAVA Script の 宣 言 5~12 行 目 IE の 画 面 下 に 移 動 する 文 字 列 を 表 示 する message="~" ~ の 部 分 は 文 字 列 各 自 適 当 に 変 更 してよい 15 行 目 このページが 表 示 されたら, 画 面 下 に 移 動 する 文 字 を 表 示 23~34 行 目 現 在 時 刻 を 自 分 のパソコンの 日 時 データから 読 み 取 り 表 示 する 図 5-22 13-14

test2.html の 変 更 ( 図 5-23) 5~7 行 目 test2.html が 表 示 される 際,ウィンドウの 位 置 を 左 上 から(50 ピクセル,50 ピクセル)の 位 置 に 表 示 するよう 指 示 (50,50) の 数 値 は 任 意 に 変 更 してよい 8~12 行 目 別 ウィンドウ test3.html が 表 示 されるよう 設 定 test3.html の 新 規 作 成 ( 図 5-24) 新 規 に test3.html を 作 成 する 6 行 目 test3.html を 表 示 するサイズをピクセル 単 位 で 指 定 する この 例 では, 横 300 ピクセル, 縦 100 ピクセルとしている 10 行 目 test3.html を 閉 じる 時 間 を 指 定 3000 で 3 秒 適 当 に 数 値 を 変 えてもよい 6. 課 題 3 の 実 施 以 下 の 項 目 よりテーマをひとつ 選 び,HP を 作 成 する 内 容 はまったくの 自 由 で,まったくの 空 想 でも 可 各 自 の 能 力 に 応 じた HP を 作 成 すればよい 自 分 史, 自 己 紹 介 サークル 活 動 の 案 内 300 図 5-23 13-15

height 図 5-24 但 し, 以 下 の 点 に 注 意 する レポートには 2 ページ 分 のハードコピーしか 載 せてはならない 従 って,2 ページ 以 内 の 作 成 が 望 ましい 写 真 や 図 を 多 用 してもよいが, 課 題 3 にかかわるファイルの 総 合 計 が 1MB を 超 えてはならな い 他 を 誹 謗 中 傷 する 内 容 はだめ 他 人 に 見 られては 困 る 内 容 の 掲 載 はだめ ( 例 えば,クレジットカードナンバーなど) 課 題 3 のトップページのファイル 名 は ( 学 籍 番 号 ).html とする トップページを 含 め, 関 連 するファイルはすべて,E-Mail の 添 付 ファイルで 送 る 送 り 先 は, 実 験 時 に 連 絡 する トップページから 参 照 する 別 の HTML ファイルや 画 像 ファイルのファイル 名 はすべて 半 角 英 数 文 字 とし, 全 角 文 字 の 漢 字 やひらがな,カタカナをファイル 名 に 使 わない もちろん, 半 角 カタカナも 駄 目 E-Mail でデータを 送 ることも,この 実 験 テーマの 課 題 です 7.その 他 の 追 記 事 項 (7-1) 見 てもらう ための 一 般 的 事 項 HP は 見 てもらうため のものであり, 見 た 人 にとって 有 益 なものが 望 ましい 自 分 が 見 た 場 合 を 強 く 意 識 して 作 成 するとよい ( 他 の 実 験 レポートと 共 通 する 意 識 が 必 要 です )そのた めの 注 意 点 などを 簡 単 にまとめておきます ページへのアクセスが 軽 いこと 大 きな 写 真 をたくさん 載 せると 重 くなる (10~50kB 程 度 を 目 安 にする) 色 使 いが 見 やすいこと 同 じような 色 で, 背 景 と 文 字 とを 描 くと 見 にくくなる 1 ページの 長 さが 長 すぎないこと ページサイズが 増 大,スクロールさせるのがめんどくさい 何 を 強 調 したいのかをはっきりと 明 示 する 13-16

取 り 留 めのない 内 容 では 二 度 と 見 てもらえない 他 のページへのリンクなどがきちんとしていること エラーが 出 るページでは 役 に 立 たない 場 合 が 多 い (7-2)より 一 層 の 向 上 のために HTML のタグや JAVA の 文 法 などに 関 する 書 籍 が 多 数 出 版 されていますので, 各 自 で 調 べて, より 一 層 の 向 上 を 目 指 してください また, 他 の 人 のページを 見 るのも 参 考 になります このペ ージはどうやって 作 っているのかな? と 感 じたページがあれば, 以 下 の 方 法 で HP のソースフ ァイルを 確 認 することができます IE で 目 的 のページを 表 示 する 表 示 を 左 クリックする ソース を 左 クリックする ( 図 5-25) 通 常,ノートパッドでソースが 表 示 される ( 図 5-26) こうすることにより,より 一 層 の HP への 理 解 が 深 まります 更 なる 向 上 心 をもって 望 んでください 図 5-25 図 5-26 13-17

13.パーソナルコンピュータ 実 習 [Ⅱ] 実 験 時 の 追 加 事 項 編 本 編 に 記 載 できなかった 重 要 な 事 項 です 必 ず 一 読 しておいてください 1. 各 自 の 作 ったファイル 等 は FTP でサーバー(luna もしくは lion)に 転 送 してくださ い FDD,CD-R などへの 保 存 時 には 必 ずバックアップをとるこ と 1 この 実 験 テーマの 課 題 を 実 施 し, 実 験 テキストに 従 い マイ ドキュメ ント フォルダに 各 自 のファイルを 保 存 する 2 ログアウトもしくはシャットダウンを 行 う 前 に, (1)1 マイ ドキュメント にマウスカーソルを 合 わせ, 右 クリック 1 2 し,2 プロパティ を 左 クリックする ( 図 1) 図 1 (2) マイ ドキュメントのプロパティ が 開 く( 図 2) ので, リンク 先 をノートに 控 え, OK もしくは キ ャンセル を 左 クリックし, 閉 じる (3)FFFTP を 起 動 し,サーバーに 接 続 する ( 別 のプリン ト 13.パーソナルコンピュータ 実 習 [Ⅱ] 実 験 受 講 前 の 準 備 参 照 ) (4) 画 面 左 側 のフォルダ 名 が, 上 記 (2-2)で 控 えたフ ォルダ 名 と 一 致 するようにする ( 図 3 の 赤 枠 内 が 上 記 (2-2)で 控 えたフォルダ 名 と 同 じになるようにす る ) 図 2 (5)1サーバーに 転 送 したいファイルを 選 択 ( 左 クリッ ク)し,2ツールバーの アップロー ド を 左 クリックする ( 図 4 参 照 ) 転 送 完 了 (6)ダウンロード(サーバーから 各 自 の コンピュータにファイルを 転 送 )する 場 合, 図 5 のように,1 右 側 からファ イルを 選 び,2 ダウンロード を 左 クリックする 2. 最 終 的 にでき 上 がった 課 題 3 は HP 図 3 に 掲 載 しますので, 課 題 3 のファイ ルすべてを 電 子 メールに 添 付 して, 実 験 中 に 指 示 のあるメールアドレスに 送 ってください 但 し,ファイル 名 はすべて 英 数 半 角 文 字 とし, 拡 張 子 も 含 め, 大 文 字 と 小 文 字 に 注 意 してください また,HTML 中 でファイル 名 を 指 定 する 場 合, 大 文 字 と 小 文 字 に 注 意 し,ファイル 名 のみを 記 述 す るようにしてください 3.13 の 課 題 2 に 必 要 なファイルは 以 下 のフォルダからマイドキュメントにコピーして 使 ってください マイコンピュータ H ドライブ 電 気 工 学 実 験 IB 13-18

2 1 図 4 2 1 図 5 よくあるミス マイ ドキュメント に 保 存 している 場 合 には 正 常 に 表 示 できるが,サーバーにアップロード したら 図 が 表 示 されなかったり,リンク 先 へうまく 飛 ばない 原 因 と 対 策 1 ファイル 名 が 漢 字 である,もしくは, 大 文 字 と 小 文 字 を 使 い 分 けていない Windows 内 であれば,Windows が 自 動 的 に 大 文 字 と 小 文 字 とを 入 れ 替 えて 表 示 しますが,サー バーは UNIX 系 ですので, 大 文 字 と 小 文 字 は 正 確 に 使 い 分 けられます マイ ドキュメント を 開 いてファイルの 拡 張 子 まで, 大 文 字 と 小 文 字 を 使 い 分 けてください よくあるのは,zu.JPEG と zu.jpeg です Windows 上 ではどちらでも 表 示 されますが,サーバーでは 別 ファイルとして 扱 われます また, 幹 事 や 特 殊 記 号 を 使 ったファイル 名 も 表 示 できない 原 因 です 2 ファイル 名 を 絶 対 指 定 にしている 図 のファイル 名 を 指 定 する 場 合,<a href= c:/figure.jpg > のように, c:/ がファイル 名 の 頭 についている 場 合 には, 図 は 表 示 されません <a href= figure.jpg > のように,ファイル 名 のみ を で 囲 むようにしてください 以 上 13-19

13.パーソナルコンピュータ 実 習 [Ⅱ] html の 内 容 編 本 編 で 入 力 する html の 内 容 が 見 にくい 場 合 には 以 下 のリストを 参 照 してください 全 角 のスペースは, 半 角 のスペースは で 表 記 しています 図 5-7 <html> <head> <title></title> </head> <body> </body> </html> 図 5-13 <html> <head> <title> 練 習 ページ E03156</title> </head> <body> </body> </html> 図 5-16 <html> <head> <title> 練 習 ページ E03156</title> </head> <body> <font size=+2 color=red>ようこそ,e03156 中 部 太 郎 のページへ</font> <hr> 昨 日 の 記 録 <br> 今 日 の 予 定 <br> 明 日 の 予 定 <br> <hr> 2003.08.11 Updated </body> </html> 図 5-18 <html> 13 - 追 1

<head> <title> 練 習 ページ E03156</title> </head> <body> <center> <font size=+2 color=red>ようこそ,e03156 中 部 太 郎 のページへ</font> </center> <hr> <ul> <li><a href="test2.html"> 昨 日 の 記 録 </a> <li> 今 日 の 予 定 <ul> <li>11:00~12:40 電 気 磁 気 学 <li>17:00~21:00 アルバイト </ul> <li> 明 日 の 予 定 <table border="6" bordercolor="993399"> <tr><th align="center"> 時 刻 </th><th align="center"> 内 容 </th></tr> <tr><td>9:30~11:00</td><td> 電 気 回 路 </td></tr> <tr><td>17:00~21:00</td><td>アルバイト</td></tr> </table> </ul> <hr> <p align="right">2003.08.11 Updated</p> </body> </html> 図 5-20 <html> <head> <title> 昨 日 の 出 来 事 </title> </head> <body> 昨 日 は, 気 分 転 換 のため, 大 学 内 を 散 歩 した <br> <img src="img_1022.jpeg"> 工 法 庵 入 り 口 <br> <br> <img src="img_1024.jpeg" align="right"> 噴 水 <br clear="all"> <img src="img_1059.jpeg" width="25%" height="25%"> <hr> <a href="test.html"> <font size="+1" color="33ff00"> 戻 る</font> </body> </html> 図 5-22 <html> <head> 13-2

<title> 練 習 ページ E03156</title> <SCRIPT LANGUAGE="JavaScript"> <!-- message = " E03156 中 部 太 郎 のホームページへようこそ! ゆっくりしていってね ~"; function scroll(){ window.status=message; message = message.substring(1,message.length)+message.substring(0,1); settimeout("scroll()",200); } //--> </SCRIPT> </head> <body onload="scroll()"> <center> <font size=+2 color=red>ようこそ,e03156 中 部 太 郎 のページへ</font> </center> <hr> <ul> <li><a href="test2.html"> 昨 日 の 記 録 </a> <li> 今 日 の 予 定 <br><font size=+1> <SCRIPT LANGUAGE="JavaScript"> <!-- now = new Date(); mon = now.getmonth() + 1; date = now.getdate(); hour = now.gethours(); min = now.getminutes(); sec = now.getseconds(); document.write("ただいまの 時 刻 は ",mon, " 月 ", date, " 日 ",hour, " 時 ", min, " 分 ", sec, " 秒 "," です "); // --> </SCRIPT> </font> <ul> <li>11:00~12:40 電 気 磁 気 学 図 5-23 <html> <head> <title> 昨 日 の 出 来 事 </title> <SCRIPT LANGUAGE="JavaScript"> <!-- window.moveto(50,50); //--> <!-- function openwin(){ window.open("test3.html","","width=300,height=300,"); } //--> </SCRIPT> 13-3

</head> <body onload="openwin()"> 昨 日 は, 気 分 転 換 のため, 大 学 内 を 散 歩 した <br> <img src="img_1022.jpeg"> 工 法 庵 入 り 口 <br> <br> <img src="img_1024.jpeg" align="right"> 噴 水 <br clear="all"> <img src="img_1059.jpeg" width="25%" height="25%"> <hr> <a href="test.html"> <font size="+1" color="33ff00"> 戻 る</font> </body> </html> 図 5-24 <html> <head> <title>java Script の 例 </title> <SCRIPT LANGUAGE="JavaScript"> <!-- window.moveto(250,100); //--> </SCRIPT> </head> <body onload="settimeout('window.close()',3000)"> <center> <img src="img_1054.jpeg" width="250" height="250"><br> 散 歩 での 一 こま </center> </body> </html> 以 上 13-4