情報コミュニケーション入門b 第10回 Web入門(1)

Slides:



Advertisements
Similar presentations
情報処理入門 A ・ B 第 2 回 ネットワークの仕組み と 利用マナー 坂口 利裕 横浜市立大学商学部.
Advertisements

1 情報処理基礎 2006 年 7 月 6 日. 2 本日の学習項目 HTML 文書の基礎知識を習得する。 ホームページ・ビルダーの基本的な使 い方を習得する。 ホームページの作成 自己紹介のためのホームページを作成する。
LANどうしを、通信規約として TCP/IP プロトコルで ルータ を経由してつなぎ合わせ、 世界規模で情報のやりとりを可能にしたもの アプリケーション 層 プレゼンテーショ ン層 セッション層 トランスポート層 ネットワーク層 データリンク層 物理層 アプリケーション 層 プレゼンテーショ ン層 セッション層.
コンピュータ基礎実習 ( 上級 ) 第三回 ウェブページの作成について2 清水淳紀. 前回までの内容  ページの簡単な作り方。  ページの編集・アップロード・確認 方法について。  ページはメモ帳や Kompozer 等で編集できる。 ウェブサー バーにアップロード  ページを公開するには、必要ファイル群をウェブサー.
ASP入門 - Windows 2000 Server 活用 -.
WWW のおはなし 神戸大学理学部地球惑星科学科 4 回生 佐伯 拓郎 (地球および惑星大気科学研究室) 藤田 哲也 (宇宙物理学研究室)
情報基礎A 情報科学研究科 徳山 豪.
情報処理 第8回.
第1回.
情報コミュニケーション入門 第2回 クラス別オリエンテーション 電子メールの使い方と作法
情報処理 第7回.
Webアプリケーションの 通信メカニズム WEBアプリ研究プロジェクト 第2回.
情報処理入門A・B 第7回 ワープロソフト入門(2)
Ibaraki Univ. Dept of Electrical & Electronic Eng.
情報処理基礎 2006年 6月 1日.
ウェブページ制作の基礎 タグの直接入力によるウェブページの制作 次のスライドへ進んだり,戻ったりしたい時は,右下のボタンをクリック。 次へ.
HTMLの記述と WWWにおける情報公開 遠藤
ホームページの作り方.
WWW (=World Wide Web)とは
ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko
「コンピュータと情報システム」 07章 インターネットとセキュリティ
インターネット メールサーバ DNSサーバ WWWサーバ ファイアウォール/プロキシサーバ クライアント.
情報コミュニケーション入門 2016年度版 情報コミュニケーション入門m 総合実習(1).
HTTPプロトコルとJSP (1) データベース論 第3回.
HTTPプロトコル J2EE I 第7回 /
経済学のための情報処理 ホームページの作成.
コンピュータ基礎実習上級 #10 絶対パスによる指定
県立広島大学 全学共通教育科目 情報処理入門 第13回 2009年7月6日 県立広島大学 経営情報学部経営情報学科 准教授 小川 仁士.
情報コミュニケーション入門 総合実習(1) 基礎知識のポイント(2)
データ分析基礎c(2012年以降入学) 情報編集基礎c(2011年以前入学)
情報コミュニケーション入門b 第4回 ワープロソフト入門(2)
データベース設計 第9回 Webインタフェースの作成(1)
情報コミュニケーション入門b 第3回 ワープロソフト入門(1)
基礎プログラミング演習 第1回.
情報コミュニケーション入門b 第1回 Part2 ネットワークの仕組みと電子メール
情報コミュニケーション入門b 第1回 Part2 ネットワークの仕組みと電子メール
地理情報システム論演習 地理情報システム論演習
情報コミュニケーション入門b 第3回 ワープロソフト入門(1)
第8章 Web技術とセキュリティ   岡本 好未.
情報処理基礎 2006年 5月 18日.
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
HTTPとHTML 技術領域専攻 3回 中川 晃.
情報コミュニケーション入門b 第10回 Web入門(1)
情報スキル活用  第5週 基礎技術-5  その2 : 他のページへのリンク.
第3章 第2節 ネットワークを活用した 情報の収集・発信(2) 4 文書の構造と表現
制作技術ー3 双方向通信 : CGIシステムと環境変数
情報スキル活用  第6週    基礎技術のまとめ  復習.
タグを使ったウェブページ作成 兵庫県立伊丹北高等学校 佐藤 勝彦.
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
情報コミュニケーション入門e 第11回 Part2 Web入門(1)
情報スキル活用 第2週 基礎技術ー2 : Webページの基本形.
情報スキル活用 第4週 基礎技術-4 : その1(タグのまとめ).
インターネット             サーバーの種類 チーム 俺 春.
Htmlの基本.
コンピュータ プレゼンテーション.
データベース設計 第7回 実用データベースの運用例 クライアント=サーバシステム(1)
ウェッブページ書法の復習 ネットワーク論以前のお話.
情報コミュニケーション入門e 第9回 Part1 ワープロソフト入門(2)
情報コミュニケーション入門b 第11回 Web入門(2)
情報処理基礎A・B 坂口利裕 横浜市立大学・商学部
コンピュータ プレゼンテーション.
情報コミュニケーション入門e 第12回 Part1 Web入門(2)
情報コミュニケーション入門e 第9回 Part1 ワープロソフト入門(2)
情報コミュニケーション入門e 第8回 ワープロソフト入門(1)
情報コミュニケーション入門e 第8回 ワープロソフト入門(1)
情報コミュニケーション入門e 第12回 Part1 Web入門(2)
第14回放送授業.
ネットワークプロトコル.
プログラミング基礎a 第3回 C言語によるプログラミング入門 データ入力
プログラミング基礎a 第3回 C言語によるプログラミング入門 データ入力
Presentation transcript:

情報コミュニケーション入門b 第10回 Web入門(1) 2011.06.29 情報コミュニケーション入門b 第10回 Web入門(1) 坂口利裕

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

Webページとホームページ 一連の文書グループ(プレゼンテーション)の起点となる文書=ホームページ 独立したそれぞれの文書=Webページ 情報コミュニケーション入門b 2011.06.29 Webページとホームページ 文書中に埋め込まれたアンカー リンク 一連の文書グループ(プレゼンテーション)の起点となる文書=ホームページ 独立したそれぞれの文書=Webページ 2011.06.29 情報コミュニケーション入門b 坂口利裕

Webによるプレゼンテーション技法 Webページによる情報発信 Webページ作成の体験学習 Webの仕組みと情報発信の理解 ページの記述の仕組み リンクによるページ間の関連付け 画像の埋め込み フレーム構造を用いたプレゼンテーション作成 2011.06.29 情報コミュニケーション入門b

Webページによる情報発信 ネットワークを利用した双方向の通信 本学の教育用システムでは学内に限って公開可能 誰もが情報の発信者となれる 情報発信の練習の場の提供 セキュリティ管理の十分なスキルが必要 2011.06.29 情報コミュニケーション入門b

Webページ実現の仕組み(1) クライアントとサーバとの連係 サーバはクライアントから要求される指令に基づき,ネットワークにデータを送信する クライアントは送られてきたデータに基づき,文書・画像を再生する 2011.06.29 情報コミュニケーション入門b

World Wide Webの仕組み Web サーバー Web/DNS クライアント DNS サーバー 入力 表示 情報コミュニケーション入門b 2011.06.29 World Wide Webの仕組み Web サーバー Web/DNS クライアント DNS サーバー 1.クライアントのブラウザ・ソフトに http://www.yokohama-cu.ac.jp/index.html を指示する 入力 2.ブラウザ・ソフトはDNSサーバーに問い合わせて, ホストwww.yokohama-cu.ac.jpに対応するIPアドレスを得る ホスト名→IPアドレスに変換 ブラウザ・ソフト サーバー・ソフト 3.ブラウザ・ソフトはIPアドレスを使って,サーバーに 接続し,index.htmlというデータの送信を要求する 4.サーバー・ソフトは要求されたデータを発信元に送り返す 5.ブラウザ・ソフトは受信したデータの内容に基づいて情報を表示する 表示 index.html www.yokohama-cu.ac.jp 2011.06.29 情報コミュニケーション入門b 坂口利裕

Webページ実現の仕組み(2) データの要求手順やデータの受取手順の規格化 規格化された手順(プロトコル)に従えば,どのクライアントとどのサーバとでも通信が可能 使用されるプロトコル ハードウェア層: TCP(Transmission Control Protocol) / (over) IP(Internet Protocol) ソフトウェア層: HTTP ( Hyper Text Transfer Protocol) 2011.06.29 情報コミュニケーション入門b

Webページ実現の仕組み(3) ページ内容の表現の規格化 文書(文字の大きさ・レイアウト・箇条書き)・表の表記・画像の組込みの指示 情報コミュニケーション入門b 2011.06.29 Webページ実現の仕組み(3) ページ内容の表現の規格化 文書(文字の大きさ・レイアウト・箇条書き)・表の表記・画像の組込みの指示 アンカー(クリックすると関連付けられたWebページへ移動させるためのボタン)の指示 ページ内容は文字で表記→表現方法の規約=HTML(Hyper-Text Mark-up Language) 2011.06.29 情報コミュニケーション入門b 坂口利裕

HTML文書の基本(1) 通常の文字情報に,レイアウト・書式や表組・画像・アンカーの指示を行うためのタグを埋め込む。 タグのパターン 機能を表す名前(タグ名)を<と>で挟む 範囲を示す機能は<タグ名>と</タグ名>で開始と終了を示す 例:<b>文字をボールド体にする</b> 場所を示す機能は<タグ名>のみで示す 例:<br> (強制改行) オプション機能は,<>内のタグ名に続けて,オプション名=“オプションの内容”で示す 2011.06.29 情報コミュニケーション入門b

HTML文書の基本(2) 必須のタグ よく利用されるタグ <HTML> … </HTML> HTML文書 <BODY> … </BODY> HTML文書本文 よく利用されるタグ <HEAD> … </HEAD> ヘッダ部 (文書タイトルなど) <Hn> … </Hn> 見出しの指定。nは数字(1~6) <IMG SRC=“…”> 画像の埋め込み <A HREF=“…”> … </A> アンカーの設定 2011.06.29 情報コミュニケーション入門b

HTML文書の基本(3) 文字情報は,そのまま表示される <や>は,特別な表記で示す 半角文字の空白,改行文字は無視され,間は(1文字に)詰めて表示される 例: <や>は,特別な表記で示す < → < > → > & → & 半角カナ文字,機種依存文字は使用しない ○つき数字①②,ローマ数字ⅠⅡなど→極力使用しない! 行を 変えても 詰められる 行を変えても詰められる 2011.06.29 情報コミュニケーション入門b

HTML文書の作り方 テキストエディタ(メモ帳など)を用いる 高価なソフトウェアを必要とせずとりあえず始められる 最小限のデータですむので,データ量が少なくてすむ HTMLの知識が必要 専用エディタ(Front Page(Microsoft)・ホームページビルダー(IBM)など)やワープロソフトなどのHTML変換機能を用いる ワープロ感覚で編集が可能 既存の文書を再利用できる 内容が特定の環境に依存しすぎたり,冗長な情報が入るためにデータ量が多くなる 2011.06.29 情報コミュニケーション入門b

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

練習8 教科書p.68~76の「例題(1)」にしたがいHTML文書を作成 次回予定の練習9と合わせて提出 必須タグの表記 文字情報の表記 情報コミュニケーション入門b 2011.06.29 練習8 教科書p.68~76の「例題(1)」にしたがいHTML文書を作成 必須タグの表記 文字情報の表記 文字の書式の表記 段落の書式の表記 Webページ相互の関連付け(アンカーの表記) 次回予定の練習9と合わせて提出 提出の手順も次回説明 2011.06.29 情報コミュニケーション入門b 坂口利裕