ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko

Presentation on theme: "ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko"— Presentation transcript:

1 2003.01.13 ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko
Web Page の作成と公開 ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko

2 今日の目標 WWWのしくみを理解する HTMLタグがある程度理解できるようになる ICUのWebページ発行手順を理解する
とりあえず自分のページを作成する

3 WWWサーバーのしくみ

4 HTML とは？ ブラウザで表示 HTML ファイル index.html

5 2017/3/15 基本的な HTML の構成 Web Page の作成と公開

6 ICUのWebページ発行手順

7 ページ公開の準備 ユーザ登録 w3 のトップページ から、 を行なう ※Step3 は必要ありません この作業は１回だけやればよい！

8 staging へアップロード [Step4]

9 [Step 4] staging に接続したところ

10 [Step 4] stagingのＷ３のフォルダをオープン

11 [Step 4] dgnet フォルダをオープン

12 w3 へコピー [Step5]

13 w3 へコピー [Step5]

14 サーバー(W3) 側では http://w3.icu.ac.jp/xx/xxxxxx/ 061234 index.html / 06
061235 index.html dgnet story.html 061236 examine.html picture.jpg

15 フォルダの構造と URL の関係 http://w3.icu.ac.jp/xx/xxxxxx/ index.html (w3) W3
2017/3/15 フォルダの構造と URL の関係 index.html (w3) W3 index.html dgnet story.html (staging) examine.html picture.jpg Web Page の作成と公開

16 (3) [Step5] staging  w3 へのコピー
ページの更新についてのポイント (1) HTMLファイルの編集・新規作成 (2) staging へのアップロード (3) [Step5] staging  w3 へのコピー (4) 確認

17 ファイルの保存場所は？ Staging からページをダウンロード

18 ファイル名の約束 重要！ 拡張子は .html をつける トップページは index.html とする ファイル名に日本語は使わない
「a…z」「A…Z」「0…9」「-」（ハイフン）「_ 」（アンダーバー） 」はダメ！ 大文字・小文字に気をつける dgnet フォルダは必ず小文字で！

19 HTML タグの種類 挿入するもの 挟み込むもの HTMLタグ <BR><HR> など
<TITLE>タイトル</TITLE> <H1>見出し</H1> <A HREF="">リンク</A> <UL> 　<LI>箇条書き</LI> </UL>

20 改行やレイアウトについて 改行するには、<BR>タグなどが必要 HTMLファイルでは、複数のスペースや改行はスペース一つ分と同じ
<H>タグや <UL>タグ、<P><BR>、 <TABLE>タグなどを利用する

21 文字の装飾 ヘッダー フォントの色 <H1>見出し</H1>
HTMLタグ 文字の装飾 ヘッダー <H1>見出し</H1> <H2>見出し</h2> <H3>見出し</h3> フォントの色 <FONT COLOR="red">文字の色</FONT>

22 箇条書き HTMLタグ <UL> <LI></LI> </UL> HTMLの作成
ファイルの転送 W3へコピー <OL> <LI></LI> </OL> HTMLの作成 ファイルの転送 W3へコピー

23 画像ファイルの挿入 <IMG SRC="graph.jpg" ALT="アンケートの結果">
HTMLタグ 画像ファイルの挿入 <IMG SRC="graph.jpg" 　　　　ALT="アンケートの結果"> ALT 属性は、テキストブラウザ、音声読み上げなどのために必要 ファイルをアップロードするときは、画像ファイルも忘れずに！

24 リンク 同じページに表示 <A HREF="next.html">次へ</A> 別のウインドウに表示
<A HREF="others.html"　TARGET="_blank"> ｘｘｘのページへ</A>

25 TABLE タグ TABLE タグは他にもいろいろな用途が... HTMLタグ <TABLE BORDER="1">
<TR><TD>Win</TD><TD>Win2000</TD><TD>120</TD></TR> <TR><TD>Mac</TD><TD>OS9</TD><TD>50</TD></TR> </TABLE> TABLE タグは他にもいろいろな用途が... Win Win2000 120 Mac OS9 50