情報処理実習（工基３）

Size: px

Start display at page:

Download "情報処理実習（工基３）"

ことこみやのじょう
5 years ago
Views:

1 情報 ( 実習 )( 芸術 1 班 ) 第 5 回ホームページ篇今週は皆さんにホームページを作って頂きますホームページ作成を通じて様々な情報を発信したり受信したりする方法のひとつとなることを目指します 0 はじめにはじめに筑波大学のホームページ (HP と略 ) を見てみましょうデスクトップ上にある Internet Explorer のアイコンをダブルクリックして起動してください筑波大学教育用計算機システムの HP が現れますこのページの左側の関連サイトの中の筑波大学ホームページの部分をクリックしてみてください筑波大学の HP へジャンプしますこの時画面上方にあるアドレスの部分を見てくださいと書かれていますこれが URL といって Web 上の住所に当たるものです次にメニュー表示の中のソースを選択してみてくださいなにやらたくさんの文字や記号が現れましたがこれが今見た HP 画面を書き表したソースですこれは HTML というコンピュータ言語で書かれていますですから皆さんも自分の HP を作成するためにはこの HTML 言語で内容を書かないといけないわけです 1 インターネットを利用するには何が必要か? (1) コンピュータが必要その中に Web ブラウザと呼ばれるソフトが必要 ( 我々は Internet Explorer というソフトを使っている世の中にはこれ以外にも多くのブラウザがある ) ブラウザとは何をするためのソフトか (2) そのコンピュータがネットワークに繋がっていなければならないそもそもインターネット (Internet) という言葉はインター (Inter) とネット (Net) がくっついてできていますネットというのはネットワーク (Network) のことでコンピュータ同士が電気的にケーブルで繋がっている状態を指しますインターはインターナショナル (International) というときのインターで ~と~との間 ~と~とを含んでという意味ですつまりインターネットとは世界各地のコンピュータのネットワーク同士を (Inter) さらに結んだネットワークということで基本的に世界中の総てのコンピュータが繋がっている状態を指しますコンピュータ同士が繋がっていることでお互いにファイルをやり取りすることが可能になりました (3)Web ブラウザを起動して URL で得たい情報を指定する - 1 -

2 サーバとクライアント URL Index.html クライアントコンピュータサーバコンピュータ URL によるリクエストを受信したサーバコンピュータは自分の保存しているファイルの中から指定されたファイルを取り出しクライアントコンピュータに配信するなぜといった 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 -

3 ( 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 -

4 メニューバーファイル中の 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 -

5 (2) 教育用計算機システムのページが表示されているのを確認する (3) アドレス欄のの後に ~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 -

6 <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 -

7 6 ハイパーリンクの設定と背景の設定ハイパーリンク ( 単にリンクとも言う ) が設定された文字列や図形をクリックすると関連するページに移動することができますさきほど作ったあなたのHPの中の筑波大学という部分にハイパーリンクを設定してそこをクリックすると筑波大学のHPへジャンプするように設定してみましょうハイパーリンクの設定方法 (1) 先ほど作った index.html というファイルを再度 Word で開く (2) 筑波大学の部分をドラッグして選択する (3) 選択した部分を右クリックして表示されたメニューの中のハイパーリンクを選択する (4) するとハイパーリンクの挿入ダイアログボックスが表示される (5) この中のファイル名または Web ページ名の欄に筑波大学 HPの URL を入力し OK をクリックする (6) これでハイパーリンクの設定は完了筑波大学の文字列部分の色が変わり下線が引かれる (7) リンク元の文字列やリンク先の URL を訂正したりリンクを取消したりする場合も同様に行いますリンク元の変更表示文字列: の入力欄で変更するリンク先の変更ファイル名または Web ページ名の URL を変更リンクの解除リンクの解除ボタンをクリックする (8) 上書き保存しておくのを忘れないこと (9) ブラウザ画面に戻り最新の画面に更新ボタンをクリックする (10) 画面上の筑波大学の部分をクリックし筑波大学のHPにジャンプすることを確認する注意!!( その5) 自分のホームページをお気に入りに登録しておこう背景の設定 (1) メニューのページレイアウトをクリックする (2) 表示されたドロップダウンメニューの中のページの色をクリックすると背景の色を選択するメニューが表示される (3) その中から好きな色を選ぶ (4) あるいは塗りつぶし効果の中から好きなものを選ぶ (5) さらにお好みの画像や写真を背景として設定できる詳細は手引き参照では次により具体的に編集する作業にとりかかりましょう - 7 -

8 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 -

9 実習しようもう一つ残っている趣味のページに関しても自己紹介のページと同様に作成して index.html からリンクを貼って下さい挑戦しよう HPの構造が複雑化してきて自分のいる場所がわからなくなった場合には最初のページに戻る必要が生じますそういう場合にはどうすればよいでしょうか? 最初のページに簡単に戻るための方法を考えて下さい 9 今週の課題について課題 5 今週の課題はこの自己紹介のホームページを作成し完成させることです但し必要な条件としては以下の3 点を満たして下さい画面が3 面以上あること ( 構造化されていること ) 最低 1つは画像がはいっていること ( 文章だけでないこと ) 自分のページ以外に最低一箇所のリンクを貼ること各自おもしろくてかつ訪れた人の心に残るホームページを作ってみて下さい完成した人はその旨を講師あてに URL を書き添えて電子メールでお知らせ下さい - 9 -

10 HP の作成 ( その 1) (1)Word を使って画面を作る (2)Web ページとして保存するの H P 所属 : 筑波大学自己紹介のページ趣味のページ index.html WWW local_only 自己紹介のページ intro.html 趣味のページ hobby.html

11 HP の作成 ( その 2) (3) 作った HP をブラウザで見るの HP 筑波大学の HP 所属 : 筑波大学自己紹介のページ趣味のページ趣味のページ自己紹介のページ

情報処理実習（工基３）

情報処理実習（工基３）情報 ( 実習 )( 体育 4 班 ) 第 4 回ホームページ篇今週は皆さんにホームページを作って頂きますホームページ作成を通じて様々な情報を発信したり受信したりする方法のひとつとなることを目指します 0 はじめにはじめに筑波大学のホームページ(HP と略 )を見てみましょうデスクトップ上にある Internet