情報（実習）（体育４班）
第４回 ホームページ篇
今週は、皆さんにホームページを作って頂きます。ホームページ作成を通じて、様々な情報を発 信したり、受信したりする方法のひとつとなることを目指します。0 はじめに
はじめに、筑波大学のホームページ（HP と略）を見てみましょう。デスクトップ上にある「Internet Explorer」のアイコンをダブルクリックして起動してください。「筑波大学 教育用計算機システ ム」の HP が現れます。このページの左側の「関連サイト」の中の「筑波大学ホームページ」の部 分をクリックしてみてください。筑波大学の HP へジャンプします。 この時、画面上方にある「アドレス」の部分を見てください。「http://www.tsukuba.ac.jp」と 書かれています。これが URL といって、Web 上の住所に当たるものです。 次に、メニュー「表示」の中の「ソース」を選択してみてください。なにやらたくさんの文字や 記号が現れましたが、これが今見た HP 画面を書き表したソースです。これは、HTML というコンピ ュータ言語で書かれています。ですから、皆さんも自分の HP を作成するためには、この HTML 言語 で内容を書かないといけないわけです。1 インターネットを利用するには何が必要か？
（１）コンピュータが必要その中に、Web ブラウザ と呼ばれるソフトが必要。（我々は「Internet Explorer」という ソフトを使っている。世の中にはこれ以外にも多くのブラウザがある。） →ブラウザとは何をするためのソフトか （２）そのコンピュータがネットワークに繋がっていなければならない。 そもそもインターネット（Internet）という言葉は、インター（Inter）とネット（Net）が くっついてできています。ネットというのはネットワーク（Network）のことで、コンピュー タ同士が電気的にケーブルで繋がっている状態を指します。「インター」は、インターナシ ョナル（International）というときのインターで、「～と～との間、～と～とを含んで」と いう意味です。つまり、インターネットとは、世界各地のコンピュータのネットワーク同士 を（Inter）さらに結んだネットワークということで、基本的に世界中の総てのコンピュータ が繋がっている状態を指します。コンピュータ同士が繋がっていることで、お互いにファイ ルをやり取りすることが可能になりました。 （３）Web ブラウザを起動して、URL で得たい情報を指定する。
サーバとクライアント ・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 サーバ利用申請の手順
（１）全学計算機システムの HP の左端のメニューの「各種設定・確認」から、「Web ページ・CGI の公開」を選択してクリック。 （２）「Web コンテンツの公開申請」をクリックして、ユーザ名とパスワードを入力する。 （３）そこに表示された「筑波大学におけるウェブ公開ガイドライン」をよく読んで、「同意する」 にチェックをする。Index.html
URL
クライアントコンピュータ サーバコンピュータ（４）「Web サーバの利用を申請します」をチェックして、「上記の通り申請します」をクリック。 （５）これで申請は完了です。
3 Word によるホームページの作成
WWW 上の Web ページは、HTML (Hyper Text Markup Language) という言語で記述されています。 しかしこの言語の使い方を覚えるのは時間がかかりますので、ここではすでに習ったワープロ Word を使って Web ページを作る方法を説明します。ワープロ Word には、文書を HTML の体裁に 自動的に変換してくれる機能がついているので、これを使おうと言う訳です。 どういった内容のホームページにするかは、皆さんに考えていただくとして、まずはホームペー ジをともかく作成して、ブラウザで眺めてみましょう。その後で、皆さん独自のホームページに仕 上げて下さい。
4 Web ページファイルの作成
ホームページ作成の手順
(1) Word を起動する。→ Word のアイコンをクリックする。 (2) ファイルの新規作成。 → メニューバーの「ファイル」をクリックする。 → その中の「新規作成」をクリックする。 (3) この画面上で、ホームページの最初の画面を作成する。まずは、 ○○○○のホームページ 所属：筑波大学 ・自己紹介のページ ・趣味のページ という内容のみの画面を作ってみて下さい。 (4) このファイルを保存します。今あなたが作った画面をあなたのホームページの最初のページ として、他の人が閲覧できるようにするには、このファイルをディレクトリ WWW に保存する必 要があります。→メニューバー「ファイル」中の「Web ページとして保存」をクリックする。 →「保存先：」に「\\DISC01\HOME の s15*****(Z:)」を選びます。 →さらにその中の「www」を選んで「開く」をクリックします。 →ここには「local_only」というフォルダーがあります。このフォルダーを開き、ここに保存 します。 この「local_only」というフォルダーの中に、ホームページに必要なファイルを保存すると、この 授業で作成した各自のホームページは、筑波大学の中だけから見る事が出来る HP となります。個 人情報を保護する、という観点から、このような措置をとりました。 →「ファイル名」にこのファイルの名前を入力しますが、 ファイル名は「index.html」 として下さい。 →「ファイルの種類」が「Web ページ」となっていることを確認します。 →右下の「保存」ボタンを押すと保存が完了します。 (5) これで世界中のどこからでもあなたのＨＰが閲覧可能となりました。 注意！！（その１） 「\\DISC01\HOME の s15*****(Z:)」というディレクトリは、サーバコンピュータ上にある各自の ホームディレクトリで、あなたしかアクセスできません。 注意！！（その２） 筑波大学の教育用コンピュータシステムでは、ホームペー ジのスタートファイルの名前は、 「index.html」とする約束になっています。 注意！！（その３） URL には全角文字は使えないので、すべて英数半角文字を使用して下さい。 URL は、「Uniform Resource Locator」の略です。
http は、「hypertext transfer protocol」の略です。 www は、「world wide web」の略です。
4 ブラウザで自分のホームページを閲覧してみる
作成したホームページがまちがいなくできているか、ブラウザで確認してみましょう。
ホームページの確認
(2) 「教育用計算機システム」のページが表示されているのを確認する。 (3) アドレス欄の「http://www.u.tsukuba.ac.jp/ 」の後に、 「 ~s15*****/local_only/index.html 」と入力する。 s15***** の部分には、各自の学籍番号が入ります。 (4) 「return」キーを押すと、あなたのＨＰが表示されます。 注意！！（その４） 各自の学籍番号の前に入力する「~」は、「チルダー」と呼びます。キーボードから入力するにはど うするか、皆さんで探して下さい。
5 HTML によるホームページの作成（簡単に）
この授業では、Word を使ってホームページを作成しますが、本来は HTML という言語で HP は書 かれています。しかし短い時間でこの HTML 言語を習得してホームページを作成することは困 難ですので、授業では行いません。ですが、一部でも実感していただくために、簡単な例を使 って、HTML 言語でのホームページ製作を体験してみましょう。 （１）ホームページは、HTML という言語で書かれている。 →よって、そのファイルは「index.html」という名前になっている。 （２）タグというものを使って書く。 タグは、 <Tag>・・・</Tag> という組み合わせで書く命令で、「・・・」の部分にそ の内容を書く。 （３）例として、以下のものを書いてみよう。 ① メモ帳を起動する。 「スタートボタン」→「すべてのプログラム」→「アクセサリー」→「ワードバッド」 ② 以下の例を入力する。（裏のページ） ③ そのファイルを保存する。 ファイル名は「index-100.html」 ファイルの種類は「すべてのファイル」 保存場所は、index.html と同じ「WWW」フォルダ ④ ブラウザを起動して、このページを見てみる。 （４）よく使われるタグ ・<HTML> </HTML> HTML で書いた部分の最初と最後 ・<HEAD> </HEAD> ヘッダー部分 ・<BODY> </BODY> 本体部分・<BODY BGCOLOR=”xxx”> </BODY> 背景に色をつける。ｘｘｘは色の指定 ・<BR> 改行
・<DIV ALIGN=”xxx”> </DIV> 文章の表示位置の指定 ・<FONT SIZE=”n”> </FONT> フォントの大きさの指定 ・<B> </B> 文字の装飾 B は太字 もちろんこの他にたくさんありますが、それに関しては、各自色々な HP を探して調べてみ てください。また、書店でも関連した参考書がたくさんあります。
