情報コミュニケーション入門ｂ 第１１回 Web入門（２） 2010.07.07 情報コミュニケーション入門ｂ 第１１回 Web入門（２） 坂口利裕
本日のテーマ メインテーマ 教科書指定テキスト関連部分 Webによる情報発信 ３. ネットワークによるコミュニケーション 情報コミュニケーション入門ｂ 2010.07.07 本日のテーマ メインテーマ Webによる情報発信 教科書指定テキスト関連部分 ３. ネットワークによるコミュニケーション ６. 図形によるコミュニケーション 2010.07.07 情報コミュニケーション入門ｂ 坂口利裕
画像の利用（１） imgタグを使用 画像の準備 <img src=“画像ファイル名またはURL”> 画像ファイル名は原則として英数字 拡張子まで含めて指定する 利用可能な形式→JPG，GIF，PNG（BMPは不可） 画像の準備 既存のサイトから利用 使用許諾には留意 HTML文書のある場所にダウンロードして保存，またはURLでSRC=“”に直接指示 デジカメなどで撮影したものを使用 メールで転送し，HTML文書のある場所に保存 自作 2010.07.07 情報コミュニケーション入門ｂ
画像の利用（２） 自作の手順 ペイント系ソフトで直接作成 Excelなどのアプリケーションで作成したグラフなどを貼り付けて作成 Wordの練習時と同様 【注意】保存時の形式をPNGにしておく（JPG，GIFでは画像がぼける） Excelなどのアプリケーションで作成したグラフなどを貼り付けて作成 アプリケーションでグラフなどを［コピー］ 「ペイント」を起動し，キャンバスサイズを小さめに設定 「ペイント」で［貼り付け］， PNG形式で保存 2010.07.07 情報コミュニケーション入門ｂ
情報コミュニケーション入門ｂ 2010.07.07 Webページでの表現技法（１） 箇条書き 番号付き <ol>～</ol>で全体を囲む 項目ごとに<li>を追加（</li>はあってもよい） 数字の形式はtypeオプションで指示 開始番号はstartオプションで指示 番号なし <ul>～</ul>で全体を囲む 記号はtypeオプションで指示 例） 出来上がり例 <ol> <li>項目１<li>項目２ </ol> <ul> <li>項目１<li>項目２ </ul> 2010.07.07 情報コミュニケーション入門ｂ 坂口利裕
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.07 情報コミュニケーション入門ｂ
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.07 情報コミュニケーション入門ｂ
フレームを意識した アンカー指示 アンカーの指示による違い （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.07 情報コミュニケーション入門ｂ
対話的ページ作成のための仕組み フォーム CGI プログラムによる双方向通信 HTMLで規定される最も基本の手段 Common Gateway Interface サーバー用ソフトウェアに依存 プログラムによる双方向通信 サーバー側で処理するもの クライアント側に送られたプログラムで処理するもの （ウィルスの温床ともなるので要・注意） 2010.07.07 情報コミュニケーション入門ｂ
Webサーバの機能 ネットワーク経由による発信 アクセス制限 動的ページの実現 他のクライアントマシンからのアクセスを許可することによる情報発信 アクセス制限 設定により，特定のマシン・ドメイン・ユーザからのアクセスの可否を指定可能 パスワードなどによる認証も可能（必ずしも安全ではない） 動的ページの実現 対話型のページの実現 発信だけでなく収集も可能 2010.07.07 情報コミュニケーション入門ｂ
練習９ 教科書p.76～81の「例題（２）」にしたがい画像ファイルとHTML文書を作成 応用（余力のある人） メールで提出 情報コミュニケーション入門ｂ 2010.07.07 練習９ 教科書p.76～81の「例題（２）」にしたがい画像ファイルとHTML文書を作成 画像ファイルの作成 表示用HTML文書の作成 アンカーによる関連付け 応用（余力のある人） 「HTMLによるWebページ作成の練習：応用編」を参照（未配布） 表組みや箇条書き フレームを使ったページ フレーム指示のHTML＋目次のHTML＋最初のページ メールで提出 練習８も含めて，作業に使ったフォルダをZIP圧縮したものを添付ファイルにして送信 圧縮の手順は「HTMLによるWebページ作成の練習：応用編」の最終ページを参照 2010.07.07 情報コミュニケーション入門ｂ 坂口利裕