ネネネネネネ ネネネネネネ de de ネネネネ ネネネネ - - ネネネネネネネネネネネネ ネ 一 ネネネネネネネネネネネネ ネ 一 - - ネ ネネネネネネネ 西 ネネ ネネ
Mar 16, 2016
ネットワーク ネットワーク 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 ファイルの見栄えをブラウザで確認する
タグの種類(その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> ガスクロ <li> 超臨界クロマト </ul>
・液クロ・ガスクロ・超臨界クロマト
タグの種類(その8)• マーク付きリスト <ol> <li> 液クロ <li> ガスクロ <li> 超臨界クロマト </ol>
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=mailto:[email protected]>[email protected]</a>
へ お問い合わせは [email protected] へ
タグの種類(その 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 23 45 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 ページとして保存』 を選択する。 超簡単な方法だが、小変更に難(私見)。
情報公開で注意すること• コンテンツ作成 画像が多いと閲覧する際に重い ページ表示のスクロールは避ける•著作権の主張と尊重•盗作をしない•個人情報は厳重管理