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