Embed Size (px)
DESCRIPTION
ネットワーク de 情報発信. - コンテンツ作りのはじめの一歩 -. 城西国際大学薬学部 二村 典行. WWW:W orld W ide W eb. ネットワーク上で機能するハイパーテキスト・システム サーバー（発信）＆クライアント（受信） ビュワー（ブラウザ）： Explorer, Netscape ホームページ（トップページ） URL: Uniform Resource Location インターネットの住所. ネットワーク・プロトコル. http : WWW の基本プロトコル ftp : 遠隔コンピュータ間でのデータ交換のためのプロトコル - PowerPoint PPT Presentation
Citation preview
ネットワーク ネットワーク de 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 ファイルの見栄えをブラウザで確認する
タグの種類（その１）• 始めと終わり ( タグは大文字・小文字区別なし ) <html> <title> ページのタイトル </title> <body> 本文内容 </body> </html>
タグの種類（その２）• 文字のサイズ <font size=3> 文字サイズ </font> 数字が大きくなると表示される文字が大きくなる <font size=+1>, <font size=-1> <h3> 文字サイズ </h> 数字が小さくなると表示される文字が大きくなる
タグの種類（その３）• 強調（太）文字 <b> ボールド </b> ボールド <strong> 強調 </strong> 強調• 傾斜文字 <i> イタリック </i> イタリック• 下線 <u> アンダーライン </u> アンダーライン
タグの種類（その４）• 下付き、上付き <sup> 上付き </sup> 上付き <sub> 下付き </sub> 下付き
• 取り消し <s> 取り消し </s> 取り消し
タグの種類（その５）• 改行 文章の最後。 <br> 単純改行• 改行無し <nobr> 改行無し </nobr> • 段落改行 段落の最後。 <p> １行空け改行
タグの種類（その６）• 行揃え <center> センタリング </center> <p align=◇> 行揃え </p> ◇； left, center, right <p align=right> 城西国際大学 <br> 薬学部 </p>
城西国際大学薬学部
タグの種類（その７）• マーク付きリスト <ul> <li> 液クロ <li> ガスクロ <li> 超臨界クロマト </ul>
・液クロ・ガスクロ・超臨界クロマト
タグの種類（その８）• マーク付きリスト <ol> <li> 液クロ <li> ガスクロ <li> 超臨界クロマト </ol>
1. 液クロ2. ガスクロ3. 超臨界クロマト
タグの種類（その９）• イメージ（画像）の貼り込み <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=mailto:[email protected]>[email protected]</a>
へ お問い合わせは [email protected] へ
タグの種類（その 11 ）• テーブルタグ（作表） <table border=1> <tr><td> １ </td><td> ２ </td></tr> <tr><td>3</td><td>4</td></tr> <tr><td>5</td><td>6</td></tr> </table>
１ ２３ ４５ ６
タグの種類（その 12 ）• 区切り線（ヘアライン） <hr> ブラウザ表示幅一杯 <hr width=◇> 幅の長さ指定 <hr size=◆> 太さ指定 <hr width=◇ size=◆> 幅と太さ指定 幅（◇）はピクセルまたは％
タグの種類（その 13 ）• インターネット上での色表現 <body bgcolor=blue> 背景色を「青」に <font color=red> 文字色を「赤」に </font> 色指定は三原色の１６進数指定（ #rrggbb ） 赤； #ff0000 、緑； #00ff00 、青； 0000ff 黒； #000000 、白； #ffffff 、
特殊フォント• Symbol フォント、ギリシャ文字、特殊単位
¥
±
Ö
ß
¥
±
Ö
ß
¥
±
Ö
ß
キーワード コード番号
もう少し楽してコンテンツ作成
• 無料提供のホームページ作成ソフト Netscape をダウンロード・インストール http://wp.netscape.com/ja/index.html Netscape を起動して、「ウィンドウ」メニューから「 Composer 」を開く。 ワープロ感覚で HTML ファイルを作成可能
MS ワードやエクセルでHTML
ワードやエクセルで体裁を整えたコンテンを作成し ファイル保存の際 ファイルメニュー 『 Web ページとして保存』 を選択する。 超簡単な方法だが、小変更に難（私見）。
情報公開で注意すること• コンテンツ作成 画像が多いと閲覧する際に重い ページ表示のスクロールは避ける•著作権の主張と尊重•盗作をしない•個人情報は厳重管理
