ネットワーク 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ページとして保存』 を選択する。 超簡単な方法だが、小変更に難(私見)。
情報公開で注意すること コンテンツ作成 画像が多いと閲覧する際に重い ページ表示のスクロールは避ける 著作権の主張と尊重 盗作をしない 画像が多いと閲覧する際に重い ページ表示のスクロールは避ける 著作権の主張と尊重 盗作をしない 個人情報は厳重管理