情報コミュニケーション入門ｅ 第１２回 Part1 Web入門（２） 2010.07.08 情報コミュニケーション入門ｅ 第１２回 Part1 Web入門（２） 坂口利裕
Part1のテーマ メインテーマ 教科書指定テキスト関連部分 Webによる情報発信 ３. ネットワークによるコミュニケーション 情報コミュニケーション入門ｅ 2010.07.08 Part1のテーマ メインテーマ Webによる情報発信 教科書指定テキスト関連部分 ３. ネットワークによるコミュニケーション ６. 図形によるコミュニケーション 2010.07.08 情報コミュニケーション入門ｅ 坂口利裕
Webページの連係 アンカータグによって指定 <a href=“参照先”>アンカーを示す文字列やimgタグによる画像の指定</a> 参照先の指示 URL： http://www.yokohama-cu.ac.jp/ など 相対参照：（その文書と同じフォルダが起点） nextpage.html など 絶対参照：（サーバー内のトップページが起点） /top/other.html など 2010.07.08 情報コミュニケーション入門ｅ
画像の利用（１） imgタグを使用 画像の準備 <img src=“画像ファイル名またはURL”> 画像ファイル名は原則として英数字 拡張子まで含めて指定する 利用可能な形式→JPG，GIF，PNG（BMPは不可） 画像の準備 既存のサイトから利用 使用許諾には留意 HTML文書のある場所にダウンロードして保存，またはURLでSRC=“”に直接指示 デジカメなどで撮影したものを使用 メールで転送し，HTML文書のある場所に保存 自作 2010.07.08 情報コミュニケーション入門ｅ
画像の利用（２） 自作の手順 ペイント系ソフトで直接作成 Excelなどのアプリケーションで作成したグラフなどを貼り付けて作成 Wordの練習時と同様 【注意】保存時の形式をPNGにしておく（JPG，GIFでは画像がぼける） Excelなどのアプリケーションで作成したグラフなどを貼り付けて作成 アプリケーションでグラフなどを［コピー］ 「ペイント」を起動し，キャンバスサイズを小さめに設定 「ペイント」で［貼り付け］， PNG形式で保存 2010.07.08 情報コミュニケーション入門ｅ
Webページでの表現技法（１） 箇条書き 番号付き <ol>～</ol>で全体を囲む 項目ごとに<li>を追加（</li>はあってもよい） 数字の形式はtypeオプションで指示 開始番号はstartオプションで指示 番号なし <ul>～</ul>で全体を囲む 記号はtypeオプションで指示 例） 出来上がり例 <ol> <li>項目１<li>項目２ </ol> <ul> <li>項目１<li>項目２ </ul> 2010.07.08 情報コミュニケーション入門ｅ
Webページでの表現技法（２） 表 TABLEとしてはもちろん擬似的なフレームとしても多用される <table>～</table>で全体を指定 <tr>～</tr>で行を指定 <td>～</td>で列を指定 例） 出来上がり例 <table border=“1”> <tr> <td>2</td><td>7</td><td>6</td> </tr> <tr> <td>9</td><td>5</td><td>1</td> </tr> <tr> <td>4</td><td>3</td><td>8</td> </tr> </table> 2010.07.08 情報コミュニケーション入門ｅ
Webページの構造化 フレームによるレイアウト 複数のWebページを単一ウィンドウにレイアウト 通常のHTMLファイルの<body>～</body>の代わりに使用 <frameset レイアウト指定>～</frameset>で全体のレイアウトを指定 cols=“横方向のフレーム数とそれぞれの幅” rows=“縦方向のフレーム数とそれぞれの幅” <frame name=“フレーム名” src=“URL”>で実際のWebページ（最初に呼び出されるページ）を指示 例） 出来上がり例 <frameset cols=“20%,80%”> <frame name=“toc” src=“mokuji.html”> <frame name=“body” src=“naiyou.html”> </frameset> 2010.07.08 情報コミュニケーション入門ｅ
フレームを意識した アンカー指示 アンカーの指示による違い （tocに呼び出されているページで） toc body 同じフレームに別のページを呼び出す <a href=“nextpage.html”>～</a> 別のフレームに別のページを呼び出す <a href=“nextpage.html” target=“body”>～</a> フレームを解除して，まったく別のページをウィンドウ全体に呼び出す <a href=“nextpage.html” target=“_top”>～</a> toc body nextpage.html 2010.07.08 情報コミュニケーション入門ｅ
対話的ページ作成のための仕組み フォーム CGI プログラムによる双方向通信 HTMLで規定される最も基本の手段 Common Gateway Interface サーバー用ソフトウェアに依存 プログラムによる双方向通信 サーバー側で処理するもの クライアント側に送られたプログラムで処理するもの （ウィルスの温床ともなるので要・注意） 2010.07.08 情報コミュニケーション入門ｅ
Webサーバの機能 ネットワーク経由による発信 アクセス制限 動的ページの実現 他のクライアントマシンからのアクセスを許可することによる情報発信 アクセス制限 設定により，特定のマシン・ドメイン・ユーザからのアクセスの可否を指定可能 パスワードなどによる認証も可能（必ずしも安全ではない） 動的ページの実現 対話型のページの実現 発信だけでなく収集も可能 2010.07.08 情報コミュニケーション入門ｅ
練習７ 教科書p.76～81の「例題（２）」にしたがい画像ファイルとHTML文書を作成 応用（余力のある人） メールで提出（＋α対象） 情報コミュニケーション入門ｅ 2010.07.08 練習７ 教科書p.76～81の「例題（２）」にしたがい画像ファイルとHTML文書を作成 画像ファイルの作成 表示用HTML文書の作成 アンカーによる関連付け 応用（余力のある人） 表組みや箇条書き フレームを使ったページ フレーム指示のHTML＋目次のHTML＋最初のページ 切り替え後のページ メールで提出（＋α対象） 練習６も含めて，作業に使ったフォルダをZIP圧縮したものを添付ファイルにして送信 圧縮の手順は「応用練習」の最終ページを参照 2010.07.08 情報コミュニケーション入門ｅ 坂口利裕