情 報 ( 実 習 )( 体 育 4 班 ) 第 4 回 ホームページ 篇 今 週 は 皆 さんにホームページを 作 って 頂 きます ホームページ 作 成 を 通 じて 様 々な 情 報 を 発 信 したり 受 信 したりする 方 法 のひとつとなることを 目 指 します 0 はじめに はじめに 筑 波 大 学 のホームページ(HP と 略 )を 見 てみましょう デスクトップ 上 にある Internet Explorer のアイコンをダブルクリックして 起 動 してください 筑 波 大 学 教 育 用 計 算 機 システ ム の HP が 現 れます このページの 左 側 の 関 連 サイト の 中 の 筑 波 大 学 ホームページ の 部 分 をクリックしてみてください 筑 波 大 学 の HP へジャンプします この 時 画 面 上 方 にある アドレス の 部 分 を 見 てください http://www.tsukuba.ac.jp と 書 かれています これが URL といって Web 上 の 住 所 に 当 たるものです 次 に メニュー 表 示 の 中 の ソース を 選 択 してみてください なにやらたくさんの 文 字 や 記 号 が 現 れましたが これが 今 見 た HP 画 面 を 書 き 表 したソースです これは HTML というコンピ ュータ 言 語 で 書 かれています ですから 皆 さんも 自 分 の HP を 作 成 するためには この HTML 言 語 で 内 容 を 書 かないといけないわけです 1 インターネットを 利 用 するには 何 が 必 要 か? (1)コンピュータが 必 要 その 中 に Web ブラウザ と 呼 ばれるソフトが 必 要 ( 我 々は Internet Explorer という ソフトを 使 っている 世 の 中 にはこれ 以 外 にも 多 くのブラウザがある ) ブラウザとは 何 をするためのソフトか (2)そのコンピュータがネットワークに 繋 がっていなければならない そもそもインターネット(Internet)という 言 葉 は インター(Inter)とネット(Net)が くっついてできています ネットというのはネットワーク(Network)のことで コンピュー タ 同 士 が 電 気 的 にケーブルで 繋 がっている 状 態 を 指 します インター は インターナシ ョナル(International)というときのインターで ~と~との 間 ~と~とを 含 んで と いう 意 味 です つまり インターネットとは 世 界 各 地 のコンピュータのネットワーク 同 士 を(Inter)さらに 結 んだネットワークということで 基 本 的 に 世 界 中 の 総 てのコンピュータ が 繋 がっている 状 態 を 指 します コンピュータ 同 士 が 繋 がっていることで お 互 いにファイ ルをやり 取 りすることが 可 能 になりました (3)Web ブラウザを 起 動 して URL で 得 たい 情 報 を 指 定 する - 1 -
サーバとクライアント URL Index.html クライアントコンピュータ サーバコンピュータ URL によるリクエストを 受 信 したサーバコンピュータは 自 分 の 保 存 しているファイルの 中 から 指 定 されたファイルを 取 り 出 し クライアントコンピュータに 配 信 する なぜ http://www.tsukuba.ac.jp といった URL でサーバにアクセスできるのか? コンピュータ 同 士 が 通 信 する 際 には プロトコル と 呼 ばれる 通 信 手 段 を 決 定 し お 互 いに 同 じプ ロトコルを 使 わなくてはならない これは 人 間 同 士 が 会 話 するときに 同 じ 言 語 を 使 うのと 類 似 している インターネット 上 では TCP/IP というプロトコルを 利 用 する TCP/IP では ネットワーク 上 の 各 コンピュータに 固 有 の IP アドレスと 呼 ばれる 32bit(4bytes) の 識 別 子 を 割 り 当 てる TCP/IP を 使 った 通 信 では 相 手 の IP アドレスを 指 定 することで 間 違 った 相 手 に 届 かないようにしています インターネットにアクセスできるということは 皆 さんのコンピュータにも 必 ず IP アドレスが 割 り 当 てられているわけです しかし IP アドレスは URL のどこにも 書 かれていない? ホスト 名 とドメイン 名 を IP アドレスに 変 換 するための 一 覧 表 を 管 理 しているところがありま す 2 Web サーバの 利 用 申 請 あなたが 作 成 した HP を 公 開 するために 必 要 な Web サーバ 利 用 申 請 をまず 最 初 に 行 います こ の 申 請 がなされていないと HP を 作 成 公 開 することができません Web サーバ 利 用 申 請 の 手 順 (1) 全 学 計 算 機 システムの HP の 左 端 のメニューの 各 種 設 定 確 認 から Web ページ CGI の 公 開 を 選 択 してクリック (2) Web コンテンツの 公 開 申 請 をクリックして ユーザ 名 とパスワードを 入 力 する (3)そこに 表 示 された 筑 波 大 学 におけるウェブ 公 開 ガイドライン をよく 読 んで 同 意 する にチェックをする - 2 -
(4) Web サーバの 利 用 を 申 請 します をチェックして 上 記 の 通 り 申 請 します をクリック (5)これで 申 請 は 完 了 です 3 Word によるホームページの 作 成 WWW 上 の Web ページは HTML (Hyper Text Markup Language) という 言 語 で 記 述 されています しかしこの 言 語 の 使 い 方 を 覚 えるのは 時 間 がかかりますので ここではすでに 習 ったワープロ Word を 使 って Web ページを 作 る 方 法 を 説 明 します ワープロ Word には 文 書 を HTML の 体 裁 に 自 動 的 に 変 換 してくれる 機 能 がついているので これを 使 おうと 言 う 訳 です どういった 内 容 のホームページにするかは 皆 さんに 考 えていただくとして まずはホームペー ジをともかく 作 成 して ブラウザで 眺 めてみましょう その 後 で 皆 さん 独 自 のホームページに 仕 上 げて 下 さい 4 Web ページファイルの 作 成 ホームページ 作 成 の 手 順 (1) Word を 起 動 する Word のアイコンをクリックする (2) ファイルの 新 規 作 成 メニューバーの ファイル をクリックする その 中 の 新 規 作 成 をクリックする (3) この 画 面 上 で ホームページの 最 初 の 画 面 を 作 成 する まずは のホームページ 所 属 : 筑 波 大 学 自 己 紹 介 のページ 趣 味 のページ という 内 容 のみの 画 面 を 作 ってみて 下 さい (4) このファイルを 保 存 します 今 あなたが 作 った 画 面 をあなたのホームページの 最 初 のページ として 他 の 人 が 閲 覧 できるようにするには このファイルをディレクトリ WWW に 保 存 する 必 要 があります - 3 -
メニューバー ファイル 中 の Web ページとして 保 存 をクリックする 保 存 先 : に \\DISC01\HOME の s15*****(z:) を 選 びます さらにその 中 の www を 選 んで 開 く をクリックします ここには local_only というフォルダーがあります このフォルダーを 開 き ここに 保 存 します この local_only というフォルダーの 中 に ホームページに 必 要 なファイルを 保 存 すると この 授 業 で 作 成 した 各 自 のホームページは 筑 波 大 学 の 中 だけから 見 る 事 が 出 来 る HP となります 個 人 情 報 を 保 護 する という 観 点 から このような 措 置 をとりました ファイル 名 にこのファイルの 名 前 を 入 力 しますが ファイル 名 は index.html として 下 さい ファイルの 種 類 が Web ページ となっていることを 確 認 します 右 下 の 保 存 ボタンを 押 すと 保 存 が 完 了 します (5) これで 世 界 中 のどこからでもあなたのHPが 閲 覧 可 能 となりました 注 意!!(その1) \\DISC01\HOME の s15*****(z:) というディレクトリは サーバコンピュータ 上 にある 各 自 の ホームディレクトリで あなたしかアクセスできません 注 意!!(その2) 筑 波 大 学 の 教 育 用 コンピュータシステムでは ホームページのスタートファイルの 名 前 は index.html とする 約 束 になっています 注 意!!(その3) URL には 全 角 文 字 は 使 えないので すべて 英 数 半 角 文 字 を 使 用 して 下 さい URL は Uniform Resource Locator の 略 です http は hypertext transfer protocol の 略 です www は world wide web の 略 です 4 ブラウザで 自 分 のホームページを 閲 覧 してみる 作 成 したホームページがまちがいなくできているか ブラウザで 確 認 してみましょう ホームページの 確 認 (1) Internet Explorer(IE)のアイコンをダブルクリックして 起 動 する - 4 -
(2) 教 育 用 計 算 機 システム のページが 表 示 されているのを 確 認 する (3) アドレス 欄 の http://www.u.tsukuba.ac.jp/ の 後 に ~s15*****/local_only/index.html と 入 力 する s15***** の 部 分 には 各 自 の 学 籍 番 号 が 入 ります (4) return キーを 押 すと あなたのHPが 表 示 されます 注 意!!(その4) 各 自 の 学 籍 番 号 の 前 に 入 力 する ~ は チルダー と 呼 びます キーボードから 入 力 するにはど うするか 皆 さんで 探 して 下 さい 5 HTML によるホームページの 作 成 ( 簡 単 に) この 授 業 では Word を 使 ってホームページを 作 成 しますが 本 来 は HTML という 言 語 で HP は 書 かれています しかし 短 い 時 間 でこの HTML 言 語 を 習 得 してホームページを 作 成 することは 困 難 ですので 授 業 では 行 いません ですが 一 部 でも 実 感 していただくために 簡 単 な 例 を 使 って HTML 言 語 でのホームページ 製 作 を 体 験 してみましょう (1)ホームページは HTML という 言 語 で 書 かれている よって そのファイルは index.html という 名 前 になっている (2)タグというものを 使 って 書 く タグは <Tag> </Tag> という 組 み 合 わせで 書 く 命 令 で の 部 分 にそ の 内 容 を 書 く (3) 例 として 以 下 のものを 書 いてみよう 1 メモ 帳 を 起 動 する スタートボタン すべてのプログラム アクセサリー ワードバッド 2 以 下 の 例 を 入 力 する ( 裏 のページ) 3 そのファイルを 保 存 する ファイル 名 は index-100.html ファイルの 種 類 は すべてのファイル 保 存 場 所 は index.html と 同 じ WWW フォルダ 4 ブラウザを 起 動 して このページを 見 てみる (4)よく 使 われるタグ <HTML> </HTML> HTML で 書 いた 部 分 の 最 初 と 最 後 <HEAD> </HEAD> ヘッダー 部 分 <BODY> </BODY> 本 体 部 分 - 5 -
<BODY BGCOLOR= xxx > </BODY> 背 景 に 色 をつける xxxは 色 の 指 定 <BR> 改 行 <DIV ALIGN= xxx > </DIV> 文 章 の 表 示 位 置 の 指 定 <FONT SIZE= n > </FONT> フォントの 大 きさの 指 定 <B> </B> 文 字 の 装 飾 B は 太 字 もちろんこの 他 にたくさんありますが それに 関 しては 各 自 色 々な HP を 探 して 調 べてみ てください また 書 店 でも 関 連 した 参 考 書 がたくさんあります 例 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=shift_jis"> <TITLE>HTML を 使 ったホームページ</TITLE> </HEAD> <BODY BGCOLOR="yellow"> このホームページは <BR><BR> <B> <FONT SIZE="5"> <DIV ALIGN="center"> HTML 言 語 で<BR><BR> </DIV> </FONT> </B> 書 かれています <BR> </BODY> </HTML> - 6 -
6 ハイパーリンクの 設 定 と 背 景 の 設 定 ハイパーリンク( 単 にリンクとも 言 う)が 設 定 された 文 字 列 や 図 形 をクリックすると 関 連 するペ ージに 移 動 することができます さきほど 作 ったあなたのHPの 中 の 筑 波 大 学 という 部 分 に ハイパーリンクを 設 定 して そこをクリックすると 筑 波 大 学 のHPへジャンプするように 設 定 し てみましょう ハイパーリンクの 設 定 方 法 (1) 先 ほど 作 った index.html というファイルを 再 度 Word で 開 く (2) 筑 波 大 学 の 部 分 をドラッグして 選 択 する (3) ツールバーの 挿 入 をクリックする (4) 表 示 されたメニューの 中 の ハイパーリンク を 選 択 する (5) すると ハイパーリンクの 挿 入 ダイアログボックスが 表 示 される (6) この 中 の ファイル 名 または Web ページ 名 の 欄 に 筑 波 大 学 HPの URL http://www.tsukuba.ac.jp を 入 力 し OK をクリックする (7) これでハイパーリンクの 設 定 は 完 了 筑 波 大 学 の 文 字 列 部 分 の 色 が 変 わり 下 線 が 引 かれる (8) リンク 元 の 文 字 列 や リンク 先 の URL を 訂 正 したり リンクを 取 消 したりする 場 合 も 同 様 に 行 います リンク 元 の 変 更 表 示 文 字 列 : の 入 力 欄 で 変 更 する リンク 先 の 変 更 ファイル 名 または Web ページ 名 の URL を 変 更 リンクの 解 除 リンクの 解 除 ボタンをクリックする (9) 上 書 き 保 存 しておくのを 忘 れないこと (10) ブラウザ 画 面 に 戻 り 最 新 の 画 面 に 更 新 ボタンをクリックする (11) 画 面 上 の 筑 波 大 学 の 部 分 をクリックし 筑 波 大 学 のHPにジャンプすることを 確 認 する 注 意!!(その5) 自 分 のホームページを お 気 に 入 り に 登 録 しておこう 背 景 の 設 定 (1) ツールバーの 書 式 (O) をクリックする (2) 表 示 されたドロップダウンメニューの 中 の 背 景 (K) にマウスカーソルを 合 わせると 背 景 の 色 を 選 択 するメニューが 表 示 される (3) その 中 から 好 きな 色 を 選 ぶ では 次 に より 具 体 的 に 編 集 する 作 業 にとりかかりましょう - 7 -
7 ホームページの 内 容 を 考 える ここで 作 成 するホームページは 各 人 が 自 己 紹 介 をするホームページ とします 中 身 には 自 分 自 身 の 紹 介 出 身 地 の 紹 介 友 人 の 紹 介 趣 味 の 紹 介 などが 適 当 でしょうか 皆 さんが 思 う 通 りに 作 って 頂 いてかまいませんが 情 報 発 信 の 際 のルールとマナーを 守 って 下 さ い 皆 さんが 作 ったホームページは そこに 書 き 込 んだ 内 容 が 瞬 時 に 世 界 中 に 向 かって 発 信 されるわ けです 従 って もしルール 違 反 やマナーの 欠 如 があれば 瞬 時 に 法 令 に 違 反 してしまう 可 能 性 を 秘 めています 情 報 の 発 信 が 容 易 であるということは 犯 罪 をおかす(あるいは 犯 罪 に 巻 き 込 まれる)ことも 同 じように 容 易 であるということです 8 ホームページの 構 成 を 考 える( 構 造 化 のすすめ) ホームページは 上 手 に 構 造 化 されていると とても 見 やすくなります 例 えば この 授 業 のページを 見 て 下 さい 毎 週 の 授 業 の 一 覧 のページがはじめにあり 各 回 の 授 業 の 詳 細 な 内 容 はその 下 部 の 画 面 に 書 かれている 形 になっています これすべてを ただ1つ の 画 面 に 盛 り 込 むと 非 常 にみづらい 画 面 となってしまいます そこでHPの 内 部 構 造 を はじめに 考 えておいて 下 さい 構 造 化 をする 際 に いま 勉 強 した リンクを 貼 る という 方 法 を 使 ってください つまり 自 分 のHPの 中 から 別 の 自 分 のファイルへジャンプするように 設 定 するわけです 構 造 化 の 方 法 (1) Word を 起 動 して 新 しいファイルを 準 備 する (2) 画 面 に 自 己 紹 介 のページ と 書 く (3) このファイルを index.html の 場 合 と 同 様 に Web ページとして 保 存 する ファイルの 名 前 は intro.html とする 保 存 場 所 は 同 じく WWW のフォルダの 中 の local_only フォルダー 内 とする (4) つぎに index.html ファイルを 開 き 自 己 紹 介 のページ という 文 字 列 にハイパーリンク を 設 定 します (5) その 時 の ファイル 名 または Web ページ 名 には intro.html と 入 力 します (6) index.html ファイルを 上 書 き 保 存 します (7) ブラウザを 起 動 させて 自 己 紹 介 のページにリンクされているか 確 認 します - 8 -
実 習 しよう もう 一 つ 残 っている 趣 味 のページ に 関 しても 自 己 紹 介 のページ と 同 様 に 作 成 して index.html からリンクを 貼 って 下 さい 挑 戦 しよう HPの 構 造 が 複 雑 化 してきて 自 分 のいる 場 所 がわからなくなった 場 合 には 最 初 のページに 戻 る 必 要 が 生 じます そういう 場 合 にはどうすればよいでしょうか? 最 初 のページに 簡 単 に 戻 るため の 方 法 を 考 えて 下 さい 9 今 週 の 課 題 について 課 題 5 今 週 の 課 題 は この 自 己 紹 介 のホームページを 作 成 し 完 成 させることです 但 し 必 要 な 条 件 としては 以 下 の3 点 を 満 たして 下 さい 画 面 が3 面 以 上 あること ( 構 造 化 されていること ) 最 低 1つは 画 像 がはいっていること ( 文 章 だけでないこと) 自 分 のページ 以 外 に 最 低 一 箇 所 のリンクを 貼 ること 各 自 おもしろくて かつ 訪 れた 人 の 心 に 残 るホームページを 作 ってみて 下 さい 完 成 した 人 は その 旨 を 講 師 あてに URL を 書 き 添 えて 電 子 メールでお 知 らせ 下 さい - 9 -
HPの 作 成 (その1) (1)Word を 使 って 画 面 を 作 る (2)Web ページとして 保 存 する の H P 所 属 : 筑 波 大 学 自 己 紹 介 のページ 趣 味 のページ index.html WWW local_only 自 己 紹 介 のページ intro.html 趣 味 のページ hobby.html - 10 -
HPの 作 成 (その2) (3) 作 ったHPをブラウザで 見 る http://www.u.tsukuba.ac.jp/~s14xxxxx/index.html の HP 筑 波 大 学 の HP 所 属 : 筑 波 大 学 自 己 紹 介 のページ 趣 味 のページ http://www.tsukuba.ac.jp/ 趣 味 のページ 自 己 紹 介 のページ http://www.u.tsukuba.ac.jp/~s16xxxxx/hobby.html http://www.u.tsukuba.ac.jp/~s16xxxxx/intro.html - 11 -