Download presentation
Presentation is loading. Please wait.
1
ネットワーク de 情報発信 - コンテンツ作りのはじめの一歩 - 城西国際大学薬学部 二村 典行
2
WWW:World Wide Web ネットワーク上で機能するハイパーテキスト・システム サーバー（発信）＆クライアント（受信）
ビュワー（ブラウザ）：Explorer, Netscape ホームページ（トップページ） URL: Uniform Resource Location インターネットの住所
3
ネットワーク・プロトコル http: WWWの基本プロトコル ftp: 遠隔コンピュータ間でのデータ交換のためのプロトコル
telnet: 遠隔からのコンピュータ操作するためのプロトコル gopher: メニュー形式で情報をたどるプロトコル nntp: ニュースシステムのプロトコル
4
ホームページを見る URL（Webサーバー）に在るデータをネットワーク経由で遠隔的に閲覧する。
prot://host.domain/pass/ プロトコル名://ホスト名.ドメイン名/パス名/ データの基本は、HTMLファイル HTML: HyperText Markup Language
5
ネット de 情報公開の手順 Webサーバーを用意する（プロバイダ等） HTMLファイル（コンテンツ）を作成する
HTMLファイル（コンテンツ）をWebサーバーにアップロードする URLを告知する コンテンツを管理し（こまめに）更新する
6
HTML(コンテンツ)の作成 文字設定 レイアウト設定 リンク設定 他のページやデータへのリンク設定 数式・特殊文字の表記など
フォントの大きさや形の設定 数式・特殊文字の表記など レイアウト設定 ページ内テキスト・レイアウトやイメージ貼り込みの設定 作表、データ入力項目の表示など リンク設定 他のページやデータへのリンク設定
7
HTMLファイルのWeb表示 平テキストに「タグ」を用いて（埋め込んで）様々な設定を指示する。情報提供者のパソコン上。
Webサーバーの指定されたディレクトリにHTMLファイルを送信（アップロード）する。 情報閲覧者のパソコン上のブラウザは、テキストと「タグ」をネットワーク経由で読み込み、正しく解釈して、意図（指示）された設定を表示する。
8
HTML(コンテンツ)の作成 パソコンと「テキストエディタ」または「ワープロソフト」でテキスト内容入力。
テキストに対して「タグ」による表現を理解して埋め込む。「タグ」は英文字入力。 ファイルをテキスト形式で保存する ファイルの拡張子は「.html」または「.htm」 ファイル名の大文字・小文字は区別される ファイル名にはスペースは入れない HTMLファイルの見栄えをブラウザで確認する
9
タグの種類（その１） 始めと終わり(タグは大文字・小文字区別なし) <html>
<title>ページのタイトル</title> <body> 本文内容 </body> </html>
10
タグの種類（その２） 文字のサイズ <font size=3>文字サイズ</font>
数字が大きくなると表示される文字が大きくなる <font size=+1>, <font size=-1> <h3>文字サイズ</h> 数字が小さくなると表示される文字が大きくなる
11
タグの種類（その３） 強調（太）文字 <b>ボールド</b> ボールド
<strong>強調</strong> 強調 傾斜文字 <i>イタリック</i> イタリック 下線 <u>アンダーライン</u> アンダーライン
12
タグの種類（その４） 下付き、上付き <sup>上付き</sup> 上付き
<sub>下付き</sub> 下付き 取り消し <s>取り消し</s> 取り消し
13
タグの種類（その５） 改行 文章の最後。<br> 単純改行 改行無し <nobr>改行無し</nobr>
段落改行 段落の最後。<p> １行空け改行
14
タグの種類（その６） 行揃え <center>センタリング</center>
<p align=◇>行揃え</p> ◇；left, center, right <p align=right>城西国際大学<br>薬学部</p> 城西国際大学 薬学部
15
タグの種類（その７） マーク付きリスト <ul> <li>液クロ <li>ガスクロ
・液クロ ・ガスクロ ・超臨界クロマト
16
タグの種類（その８） マーク付きリスト <ol> <li>液クロ <li>ガスクロ
1. 液クロ 2. ガスクロ 3. 超臨界クロマト
17
タグの種類（その９） イメージ（画像）の貼り込み <img src=xxx.gif>
<img src=xxx.jpg align=center> <img src=xxx.gif width=◇ length=◆> 画像ファイルは「.gif」、「.jpg」、「.png」形式 幅、長さ指定は、「ピクセル数」または「％」
18
タグの種類（その10） リンク <a href=URL>リンク先URL</a>
<a href=URL target=_blank>リンク先URL</a> 別ウインドウでリンク先が開く <a href=URL#◇>ページの特定箇所</a> <a name=◇>特定箇所</a>
20
プログラムは<a href=#prog>こちら</a>
・・・ ・・・ ・・・ ・・・ <a name=prog>プログラム</a>
21
<a href=URL><img src=xxx.gif></a> メールアドレスを埋め込む
リンク（つづき） 「画像をクリック」でリンク <a href=URL><img src=xxx.gif></a> メールアドレスを埋め込む お問い合わせは <a
22
タグの種類（その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> １ ２ ３ ４ ５ ６
23
タグの種類（その12） 区切り線（ヘアライン） <hr> ブラウザ表示幅一杯 <hr width=◇> 幅の長さ指定
<hr size=◆> 太さ指定 <hr width=◇ size=◆> 幅と太さ指定 幅（◇）はピクセルまたは％
24
タグの種類（その13） インターネット上での色表現 <body bgcolor=blue> 背景色を「青」に
<font color=red>文字色を「赤」に</font> 色指定は三原色の１６進数指定（#rrggbb） 赤；#ff0000、緑；#00ff00、青；0000ff 黒；#000000、白；#ffffff、
26
特殊フォント Symbolフォント、ギリシャ文字、特殊単位 キーワード コード番号 ¥ ¥ ¥ ± ±
Ö Ö Ö ß ß ß
27
もう少し楽してコンテンツ作成 無料提供のホームページ作成ソフト Netscapeをダウンロード・インストール
Netscapeを起動して、「ウィンドウ」メニューから「Composer」を開く。 ワープロ感覚でHTMLファイルを作成可能
28
MS ワードやエクセルでHTML ワードやエクセルで体裁を整えたコンテンを作成し ファイル保存の際
ワードやエクセルで体裁を整えたコンテンを作成し ファイル保存の際 ファイルメニュー 『Webページとして保存』 を選択する。 超簡単な方法だが、小変更に難（私見）。
29
情報公開で注意すること コンテンツ作成 画像が多いと閲覧する際に重い ページ表示のスクロールは避ける 著作権の主張と尊重 盗作をしない
画像が多いと閲覧する際に重い ページ表示のスクロールは避ける 著作権の主張と尊重 盗作をしない 個人情報は厳重管理
Similar presentations
