Download
1 / 29
290 likes | 432 Views
ネットワーク de 情報発信. - コンテンツ作りのはじめの一歩 -. 城西国際大学薬学部 二村 典行. WWW:W orld W ide W eb. ネットワーク上で機能するハイパーテキスト・システム サーバー（発信）＆クライアント（受信） ビュワー（ブラウザ）： Explorer, Netscape ホームページ（トップページ） URL: Uniform Resource Location インターネットの住所. ネットワーク・プロトコル. http : WWW の基本プロトコル ftp : 遠隔コンピュータ間でのデータ交換のためのプロトコル
E N D
ネットワーク 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. 超臨界クロマト
タグの種類（その９） • イメージ（画像）の貼り込み <imgsrc=xxx.gif> <imgsrc=xxx.jpg align=center> <imgsrc=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:name@lc.jp>name@lc.jp</a>へ お問い合わせはname@lc.jpへ
タグの種類（その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ページとして保存』 を選択する。 超簡単な方法だが、小変更に難（私見）。
情報公開で注意すること • コンテンツ作成 画像が多いと閲覧する際に重い ページ表示のスクロールは避ける • 著作権の主張と尊重 • 盗作をしない • 個人情報は厳重管理
