ネットワーク de 情報発信 - コンテンツ作りのはじめの一歩 - 城西国際大学薬学部 二村 典行.

Slides:



Advertisements
Similar presentations
1 情報処理基礎 2006 年 7 月 6 日. 2 本日の学習項目 HTML 文書の基礎知識を習得する。 ホームページ・ビルダーの基本的な使 い方を習得する。 ホームページの作成 自己紹介のためのホームページを作成する。
Advertisements

情報処理 A 第 5 回かな? ワードの使い方. 拡張子  ファイルの名前は, “ ファイル名. 拡張子 ” で付け る.  拡張子は,そのファイルを読み込むソフトに影 響される –txt テキストファイル –doc ワードのファイル –xls エクセルのファイル –pdf Acrobat Reader.
1 ブログ操作マニュアル 2008 年 2 月 15 日作成:株式会社ちらし屋ドットコ ム. 2 ■ ログイン ○ ○ ○ ○ ○ com/cgi-bin/mt.cgi ○ ○ ○ ○ ○ com/cgi-bin/mt.cgi へアクセスし、 ユーザー名、パスワードを入力し、サインインをクリックする。
BWD06-01 ~ 1 ~ Web デザイン基礎 坪倉、伊藤 日本文理大学 先週 – ガイダンス – Webの歴史 –HTML 基礎 今週 について(出席と課題提出) –HTML 画像、ハイパーリンク、文字書式.
2017/2/26 情報処理 第5回.
ウェブページビルダーマニュアル 株式会社 SOIYAA.
情報基礎A 情報科学研究科 徳山 豪.
画像展示サイト“Fragments” 『閲覧しやすさ』と『デザイン性』を両立させた Webデザイン
HTMLの基礎知識.
ホームページ作成入門講座 - HTML編 - 1999年6月 Copyright© 1999 Nigata Internet Society
第2章 ネットサービスとその仕組み(前編) [近代科学社刊]
下左近研究室 ゼミ資料 ホームページの作り方(基礎編)
タグの直接入力によるウェブページの制作 練習課題1~3
デスクトップを画像として保存する(1) ① デスクトップの画像をクリップボードへコピーする。
CEC公開授業 Webサイト制作にチャレンジ! 2007年11月20日 於:東京都立板橋有徳高校 学校インターネット教育推進協会.
ウェブページ制作の基礎 タグの直接入力によるウェブページの制作 次のスライドへ進んだり,戻ったりしたい時は,右下のボタンをクリック。 次へ.
IPアドレス、IPパケットとはなにか? 情報塾( ) URLとの関係は? コンピュータ同士はどう繋がっているか?
HTMLの記述と WWWにおける情報公開 遠藤
ホームページの作り方.
WWW (=World Wide Web)とは
講議資料 コンピュータ プレゼンテーション 講議資料
ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko
デスクトップを画像として保存する(1) ① デスクトップの画像をクリップボードへコピーする。
「コンピュータと情報システム」 07章 インターネットとセキュリティ
徳山 豪 東北大学情報科学研究科 システム情報科学専攻 情報システム評価学分野
専門ゼミⅠ 南ゼミ 特別授業③ 2002年6月7日 金曜日 4限目 今泉 裕隆.
担当教官:大月 美佳(佐賀大学) 2001年度 総合科目
インターネット メールサーバ DNSサーバ WWWサーバ ファイアウォール/プロキシサーバ クライアント.
情報コミュニケーション入門 2016年度版 情報コミュニケーション入門m 総合実習(1).
【トップページ-TOPICSの登録・編集】
Webページで自己紹介をしよう! 出席番号の席に着席し ユーザ名~user○○ パスワード~pass でログオン
2017/4/9 情報処理 第5回.
県立広島大学 全学共通教育科目 情報処理入門 第13回 2009年7月6日 県立広島大学 経営情報学部経営情報学科 准教授 小川 仁士.
スタイルシート C306 情報発信の基礎【第6回】.
情報伝達・WWW・ソーシャルメディア CMSとHTMLの基礎
第3章 第2節 ネットワークを活用した情報の収集・発信(4) 情報Cプレゼン用資料(座学35) 担当 早苗雅史
パートナー様向け 仕事のご説明資料 関係者外秘 (他の方に絶対に開示しないでください).
情報コミュニケーション入門b 第4回 ワープロソフト入門(2)
第3章 第2節 ネットワークを活用した 情報の収集・発信(3) 5 表現方法の工夫
簡単PowerPoint (PowerPoint2007用)
Microsoft PowerPoint Netscape Communicator
ホームページ作成・更新講座 夏のコンピュータ学習会 画像
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
HTTPとHTML 技術領域専攻 3回 中川 晃.
情報コミュニケーション入門b 第10回 Web入門(1)
情報コミュニケーション入門b 第10回 Web入門(1)
スマホ追従バナー スクロールしてもついてくる! スマートフォンでの回遊性アーップ★.
第3章 第2節 ネットワークを活用した 情報の収集・発信(2) 4 文書の構造と表現
第3章 第2節 ネットワークを活用した 情報の収集・発信 4 文書による情報開示
情報スキル活用  第6週    基礎技術のまとめ  復習.
タグを使ったウェブページ作成 兵庫県立伊丹北高等学校 佐藤 勝彦.
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
情報コミュニケーション入門e 第11回 Part2 Web入門(1)
インターネット利用法実習 経営工学基礎演習a(第3週).
URLとファイルの対応 ユーザー s の Z:\www\ フォルダにある hello.html ファイル
情報スキル活用 第2週 基礎技術ー2 : Webページの基本形.
情報スキル活用 第4週 基礎技術-4 : その1(タグのまとめ).
コンピュータ プレゼンテーション.
ウェッブページ書法の復習 ネットワーク論以前のお話.
コンピュータと情報 第4回 ワードの使い方.
情報コミュニケーション入門e 第9回 Part1 ワープロソフト入門(2)
情報コミュニケーション入門b 第11回 Web入門(2)
コンピュータ リテラシー 担当教官  河中.
コンピュータ プレゼンテーション.
画像を貼る 目標:このようなページを作る.
情報コミュニケーション入門e 第12回 Part1 Web入門(2)
簡単PowerPoint (PowerPoint2003用)
独習XML ~第1章 XMLの基礎~ 1.1 XML文書の基礎 1.2 XMLとHTML
情報コミュニケーション入門e 第12回 Part1 Web入門(2)
第14回放送授業.
Presentation transcript:

ネットワーク de 情報発信 - コンテンツ作りのはじめの一歩 - 城西国際大学薬学部 二村 典行

WWW:World Wide Web ネットワーク上で機能するハイパーテキスト・システム サーバー(発信)&クライアント(受信) ビュワー(ブラウザ):Explorer, Netscape ホームページ(トップページ) URL: Uniform Resource Location      インターネットの住所

ネットワーク・プロトコル http: WWWの基本プロトコル ftp: 遠隔コンピュータ間でのデータ交換のためのプロトコル telnet: 遠隔からのコンピュータ操作するためのプロトコル gopher: メニュー形式で情報をたどるプロトコル nntp: ニュースシステムのプロトコル

ホームページを見る URL(Webサーバー)に在るデータをネットワーク経由で遠隔的に閲覧する。   prot://host.domain/pass/ プロトコル名://ホスト名.ドメイン名/パス名/ データの基本は、HTMLファイル http://host.domain/pass/file.html HTML: HyperText Markup Language

ネット de 情報公開の手順 Webサーバーを用意する(プロバイダ等) HTMLファイル(コンテンツ)を作成する HTMLファイル(コンテンツ)をWebサーバーにアップロードする URLを告知する コンテンツを管理し(こまめに)更新する

HTML(コンテンツ)の作成 文字設定 レイアウト設定 リンク設定 他のページやデータへのリンク設定 数式・特殊文字の表記など   フォントの大きさや形の設定   数式・特殊文字の表記など レイアウト設定   ページ内テキスト・レイアウトやイメージ貼り込みの設定   作表、データ入力項目の表示など リンク設定   他のページやデータへのリンク設定

HTMLファイルのWeb表示 平テキストに「タグ」を用いて(埋め込んで)様々な設定を指示する。情報提供者のパソコン上。 Webサーバーの指定されたディレクトリにHTMLファイルを送信(アップロード)する。 情報閲覧者のパソコン上のブラウザは、テキストと「タグ」をネットワーク経由で読み込み、正しく解釈して、意図(指示)された設定を表示する。

HTML(コンテンツ)の作成 パソコンと「テキストエディタ」または「ワープロソフト」でテキスト内容入力。 テキストに対して「タグ」による表現を理解して埋め込む。「タグ」は英文字入力。 ファイルをテキスト形式で保存する    ファイルの拡張子は「.html」または「.htm」    ファイル名の大文字・小文字は区別される    ファイル名にはスペースは入れない HTMLファイルの見栄えをブラウザで確認する

タグの種類(その1) 始めと終わり(タグは大文字・小文字区別なし) <html>  <title>ページのタイトル</title>  <body>   本文内容  </body>  </html>

タグの種類(その2) 文字のサイズ <font size=3>文字サイズ</font> 数字が大きくなると表示される文字が大きくなる   <font size=+1>, <font size=-1>  <h3>文字サイズ</h>   数字が小さくなると表示される文字が大きくなる

タグの種類(その3) 強調(太)文字 <b>ボールド</b> ボールド   <strong>強調</strong>   強調 傾斜文字   <i>イタリック</i>   イタリック 下線   <u>アンダーライン</u>   アンダーライン

タグの種類(その4) 下付き、上付き <sup>上付き</sup> 上付き   <sub>下付き</sub>  下付き 取り消し   <s>取り消し</s>  取り消し

タグの種類(その5) 改行 文章の最後。<br> 単純改行 改行無し <nobr>改行無し</nobr> 段落改行   段落の最後。<p>  1行空け改行

タグの種類(その6) 行揃え <center>センタリング</center>   <p align=◇>行揃え</p>     ◇;left, center, right <p align=right>城西国際大学<br>薬学部</p> 城西国際大学 薬学部

タグの種類(その7) マーク付きリスト <ul> <li>液クロ <li>ガスクロ ・液クロ ・ガスクロ ・超臨界クロマト

タグの種類(その8) マーク付きリスト <ol> <li>液クロ <li>ガスクロ 1. 液クロ 2. ガスクロ 3. 超臨界クロマト

タグの種類(その9) イメージ(画像)の貼り込み <img src=xxx.gif>   <img src=xxx.jpg align=center>   <img src=xxx.gif width=◇ length=◆>   画像ファイルは「.gif」、「.jpg」、「.png」形式   幅、長さ指定は、「ピクセル数」または「%」

タグの種類(その10) リンク <a href=URL>リンク先URL</a>  <a href=URL target=_blank>リンク先URL</a>    別ウインドウでリンク先が開く  <a href=URL#◇>ページの特定箇所</a> <a name=◇>特定箇所</a>

プログラムは<a href=#prog>こちら</a> ・・・ ・・・ ・・・ ・・・ <a name=prog>プログラム</a>

<a href=URL><img src=xxx.gif></a> メールアドレスを埋め込む リンク(つづき)  「画像をクリック」でリンク   <a href=URL><img src=xxx.gif></a>  メールアドレスを埋め込む   お問い合わせは   <a href=mailto:name@lc.jp>name@lc.jp</a>へ お問い合わせはname@lc.jpへ

タグの種類(その11) テーブルタグ(作表) <table border=1> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> <tr><td>5</td><td>6</td></tr> </table> 1 2 3 4 5 6

タグの種類(その12) 区切り線(ヘアライン) <hr> ブラウザ表示幅一杯 <hr width=◇> 幅の長さ指定  <hr size=◆>   太さ指定  <hr width=◇ size=◆>  幅と太さ指定     幅(◇)はピクセルまたは%

タグの種類(その13) インターネット上での色表現 <body bgcolor=blue> 背景色を「青」に  <font color=red>文字色を「赤」に</font>  色指定は三原色の16進数指定(#rrggbb)  赤;#ff0000、緑;#00ff00、青;0000ff  黒;#000000、白;#ffffff、

特殊フォント Symbolフォント、ギリシャ文字、特殊単位 キーワード コード番号 ¥ ¥ ¥ ± ± ± Ö Ö Ö ß ß ß

もう少し楽してコンテンツ作成 無料提供のホームページ作成ソフト Netscapeをダウンロード・インストール  http://wp.netscape.com/ja/index.html  Netscapeを起動して、「ウィンドウ」メニューから「Composer」を開く。  ワープロ感覚でHTMLファイルを作成可能

MS ワードやエクセルでHTML ワードやエクセルで体裁を整えたコンテンを作成し ファイル保存の際  ワードやエクセルで体裁を整えたコンテンを作成し  ファイル保存の際  ファイルメニュー 『Webページとして保存』  を選択する。  超簡単な方法だが、小変更に難(私見)。

情報公開で注意すること コンテンツ作成 画像が多いと閲覧する際に重い ページ表示のスクロールは避ける 著作権の主張と尊重 盗作をしない   画像が多いと閲覧する際に重い   ページ表示のスクロールは避ける 著作権の主張と尊重 盗作をしない 個人情報は厳重管理