情報コミュニケーション入門e 第12回 Part1 Web入門(2)

Slides:



Advertisements
Similar presentations
2017/2/26 情報処理 第5回.
Advertisements

第10回 GISによる処理技法 結合用の統計データの処理
応用コース:ワープロを活用する WORD2000 1回目 基礎コースの復習(第1章と付録) 2回目 文字の入力(第2章と第4章)
情報基礎A 情報科学研究科 徳山 豪.
情報コミュニケーション入門 第2回 クラス別オリエンテーション 電子メールの使い方と作法
情報処理 第7回:Wordを用いた文書の作成 その2 June. 10, 2016.
情報処理入門A・B 第7回 ワープロソフト入門(2)
3DCGコンテンツの基礎 第5回授業:最終課題制作
デスクトップを画像として保存する(1) ① デスクトップの画像をクリップボードへコピーする。
ウェブページ制作の基礎 タグの直接入力によるウェブページの制作 次のスライドへ進んだり,戻ったりしたい時は,右下のボタンをクリック。 次へ.
HTMLの記述と WWWにおける情報公開 遠藤
情報処理入門A・B 第8回 プレゼンテーション支援ツール
講議資料 コンピュータ プレゼンテーション 講議資料
ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko
デスクトップを画像として保存する(1) ① デスクトップの画像をクリップボードへコピーする。
情報 第一回: 練習課題 第一回 田浦健次朗 2010/4/9.
メールの利用 計算機実習室でThunderbird.
第3章 第2節 ネットワークを活用した 情報の収集・発信 6 情報の多様な提示方法 7 構造を工夫した情報の表現方法 8 ウエブページの公開
雛型ファイルについて 雛型ファイルを以下からダウンロード 昨年のプレゼン資料を参考にする場合
雛型ファイルについて 雛型ファイルを以下からダウンロード 昨年のプレゼン資料を参考にする場合
Netscape Communicator Eudora Microsoft Word
情報コミュニケーション入門 2016年度版 情報コミュニケーション入門m 総合実習(1).
雛型ファイルについて 雛型ファイルを以下からダウンロード 昨年のプレゼン資料を参考にする場合
2017/4/9 情報処理 第5回.
県立広島大学 全学共通教育科目 情報処理入門 第13回 2009年7月6日 県立広島大学 経営情報学部経営情報学科 准教授 小川 仁士.
情報コミュニケーション入門 総合実習(1) 基礎知識のポイント(2)
サイト運営者へむけて、CMS管理画面をつかって サイト運営していく方法を紹介します。
データ分析基礎c(2012年以降入学) 情報編集基礎c(2011年以前入学)
第3章 第2節 ネットワークを活用した情報の収集・発信(4) 情報Cプレゼン用資料(座学35) 担当 早苗雅史
情報コミュニケーション入門b 第4回 ワープロソフト入門(2)
データベース設計 第9回 Webインタフェースの作成(1)
情報コミュニケーション入門b 第6回 Part1 オペレーティングシステム入門
情報技術演習Ⅰ 人文学研究のための情報技術入門 2017/07/06
情報コミュニケーション入門b 第3回 ワープロソフト入門(1)
情報コミュニケーション入門e 第11回 Part1 オペレーティングシステム入門
情報コミュニケーション入門b 第3回 ワープロソフト入門(1)
情報コミュニケーション入門b 第5回 プレゼンテーション支援ツール入門
第8章 Web技術とセキュリティ   岡本 好未.
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
情報処理 第8回:Wordを用いた文書の作成 その2 June. 8, 2018.
情報コミュニケーション入門b 第10回 Web入門(1)
情報コミュニケーション入門b 第10回 Web入門(1)
九州大学キャンパスクラウド 利用法 情報ネットワーク特論 講義資料.
情報スキル活用  第5週 基礎技術-5  その2 : 他のページへのリンク.
制作技術ー3 双方向通信 : CGIシステムと環境変数
情報スキル活用  第6週    基礎技術のまとめ  復習.
タグを使ったウェブページ作成 兵庫県立伊丹北高等学校 佐藤 勝彦.
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
情報コミュニケーション入門e 第11回 Part2 Web入門(1)
情報コミュニケーション入門b 第6回 Part1 オペレーティングシステム入門
情報コミュニケーション入門e 第11回 Part1 オペレーティングシステム入門
プログラミング基礎a 第12回 Java言語による図形処理入門(3) アニメーション入門
プログラミング基礎a 第11回 Java言語による図形処理入門(3) アニメーション入門
コンピュータ プレゼンテーション.
コンピュータと情報 第4回 ワードの使い方.
情報コミュニケーション入門e 第9回 Part1 ワープロソフト入門(2)
情報コミュニケーション入門b 第11回 Web入門(2)
情報処理 第7回:Wordを用いた文書の作成 その2 June. 9, 2017.
情報処理基礎A・B 坂口利裕 横浜市立大学・商学部
コンピュータ プレゼンテーション.
画像を貼る 目標:このようなページを作る.
情報コミュニケーション入門e 第9回 Part1 ワープロソフト入門(2)
情報コミュニケーション入門e 第8回 ワープロソフト入門(1)
情報コミュニケーション入門e 第8回 ワープロソフト入門(1)
情報コミュニケーション入門e 第6回 プレゼンテーション 支援ツール入門
情報コミュニケーション入門e 第12回 Part1 Web入門(2)
第14回放送授業.
情報コミュニケーション入門e 第6回 プレゼンテーション 支援ツール入門
プログラミング基礎a 第3回 C言語によるプログラミング入門 データ入力
プログラミング基礎a 第3回 C言語によるプログラミング入門 データ入力
Presentation transcript:

情報コミュニケーション入門e 第12回 Part1 Web入門(2) 2010.07.08 情報コミュニケーション入門e 第12回 Part1 Web入門(2) 坂口利裕

Part1のテーマ メインテーマ 教科書指定テキスト関連部分 Webによる情報発信 3. ネットワークによるコミュニケーション 情報コミュニケーション入門e 2010.07.08 Part1のテーマ メインテーマ Webによる情報発信 教科書指定テキスト関連部分 3. ネットワークによるコミュニケーション 6. 図形によるコミュニケーション 2010.07.08 情報コミュニケーション入門e 坂口利裕

Webページの連係 アンカータグによって指定 <a href=“参照先”>アンカーを示す文字列やimgタグによる画像の指定</a> 参照先の指示 URL: http://www.yokohama-cu.ac.jp/ など 相対参照:(その文書と同じフォルダが起点) nextpage.html など 絶対参照:(サーバー内のトップページが起点) /top/other.html など 2010.07.08 情報コミュニケーション入門e

画像の利用(1) imgタグを使用 画像の準備 <img src=“画像ファイル名またはURL”> 画像ファイル名は原則として英数字 拡張子まで含めて指定する 利用可能な形式→JPG,GIF,PNG(BMPは不可) 画像の準備 既存のサイトから利用 使用許諾には留意 HTML文書のある場所にダウンロードして保存,またはURLでSRC=“”に直接指示 デジカメなどで撮影したものを使用 メールで転送し,HTML文書のある場所に保存 自作 2010.07.08 情報コミュニケーション入門e

画像の利用(2) 自作の手順 ペイント系ソフトで直接作成 Excelなどのアプリケーションで作成したグラフなどを貼り付けて作成 Wordの練習時と同様 【注意】保存時の形式をPNGにしておく(JPG,GIFでは画像がぼける) Excelなどのアプリケーションで作成したグラフなどを貼り付けて作成 アプリケーションでグラフなどを[コピー] 「ペイント」を起動し,キャンバスサイズを小さめに設定 「ペイント」で[貼り付け], PNG形式で保存 2010.07.08 情報コミュニケーション入門e

Webページでの表現技法(1) 箇条書き 番号付き <ol>~</ol>で全体を囲む 項目ごとに<li>を追加(</li>はあってもよい) 数字の形式はtypeオプションで指示 開始番号はstartオプションで指示 番号なし <ul>~</ul>で全体を囲む 記号はtypeオプションで指示 例) 出来上がり例 <ol> <li>項目1<li>項目2 </ol> <ul> <li>項目1<li>項目2 </ul> 2010.07.08 情報コミュニケーション入門e

Webページでの表現技法(2) 表 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 情報コミュニケーション入門e

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 情報コミュニケーション入門e

フレームを意識した アンカー指示 アンカーの指示による違い (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 情報コミュニケーション入門e

対話的ページ作成のための仕組み フォーム CGI プログラムによる双方向通信 HTMLで規定される最も基本の手段 Common Gateway Interface サーバー用ソフトウェアに依存 プログラムによる双方向通信 サーバー側で処理するもの クライアント側に送られたプログラムで処理するもの (ウィルスの温床ともなるので要・注意) 2010.07.08 情報コミュニケーション入門e

Webサーバの機能 ネットワーク経由による発信 アクセス制限 動的ページの実現 他のクライアントマシンからのアクセスを許可することによる情報発信 アクセス制限 設定により,特定のマシン・ドメイン・ユーザからのアクセスの可否を指定可能 パスワードなどによる認証も可能(必ずしも安全ではない) 動的ページの実現 対話型のページの実現 発信だけでなく収集も可能 2010.07.08 情報コミュニケーション入門e

練習7 教科書p.76~81の「例題(2)」にしたがい画像ファイルとHTML文書を作成 応用(余力のある人) メールで提出(+α対象) 情報コミュニケーション入門e 2010.07.08 練習7 教科書p.76~81の「例題(2)」にしたがい画像ファイルとHTML文書を作成 画像ファイルの作成 表示用HTML文書の作成 アンカーによる関連付け 応用(余力のある人) 表組みや箇条書き フレームを使ったページ フレーム指示のHTML+目次のHTML+最初のページ 切り替え後のページ メールで提出(+α対象) 練習6も含めて,作業に使ったフォルダをZIP圧縮したものを添付ファイルにして送信 圧縮の手順は「応用練習」の最終ページを参照 2010.07.08 情報コミュニケーション入門e 坂口利裕