Transcript 情報ネットワーク活用

Web Page の作成と公開
2002.10.08
ILC Office / ILP
KOBAYASHI Tomoko
今日の目標
WWWのしくみを理解する
 HTMLタグがある程度理解できるようになる
 ICUのWebページ発行手順を理解する
 とりあえず自分のページを作成する

WWWサーバーのしくみ
HTML とは？
ブラウザで表示
HTML ファイル
index.html
基本的な HTML の構成
HTML タグの種類

挿入するもの
<BR><HR> など

挟み込むもの
<TITLE>タイトル</TITLE>
<H1>見出し</H1>
<A HREF="">リンク</A>
<UL>
<LI>箇条書き</LI>
</UL>
改行やレイアウトについて
改行するには、<BR>タグなどが必要
 HTMLファイルでは、複数のスペースや改
行はスペース一つ分と同じ

<H>タグや <UL>タグ、<P><BR>、
<TABLE>タグなどを利用する

文字の装飾

ヘッダー
<H1>見出し</H1>
<H2>見出し</h2>
<H3>見出し</h3>

フォントの色
<FONT COLOR="red">文字の色</FONT>
箇条書き
<UL>
<LI></LI>
<LI></LI>
<LI></LI>
</UL>
<OL>
<LI></LI>
<LI></LI>
<LI></LI>
</OL>

1.
HTMLの作成
 ファイルの転送
 W3へコピー
HTMLの作成
2. ファイルの転送
3. W3へコピー
画像ファイルの挿入
<IMG SRC="graph.jpg"
ALT="アンケートの結果">
ALT 属性は、テキストブラウザ、音声読み
上げなどのために必要
 ファイルをアップロードするときは、画像ファ
イルも忘れずに！

リンク
同じページに表示
<A HREF="next.html">次へ</A>


別のウインドウに表示
<A HREF="others.html" TARGET="_blank">
ｘｘｘのページへ</A>
TABLE タグ
<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>
Win
Win2000
120
Mac
OS9
50
TABLE タグは他にもいろいろな用途が...
ファイル名の約束
拡張子は .html をつける
 トップページは index.html とする
 ファイル名に日本語は使わない


「a…z」「A…Z」「0…9」「-」（ハイフン）「_ 」（アンダーバー）
×「/」「@」「スペース 」は使わない


大文字・小文字に気をつける
dgnet フォルダは必ず小文字で！
ICUのWebページ発行手順
ユーザ登録
w3 のトップページ
[Step1] (アカウントの作成)
 [Step2] (パスフレーズの設定)

を行なってください。
Step3 は必要ありません。
から、
staging へアップロード (Step4)
w3 へコピー (Step5)
フォルダの構造と URL の関係
http://w3.icu.ac.jp/xx/xxxxxx/
index.html
W3
dgnet
index.html
http://w3/xx/xxxxxx/dgnet/
story.html
http://w3/xx/xxxxxx/dgnet/story.html
examine.html
picture.jpg
サーバー(W3) 側では
061234
http://w3.icu.ac.jp/xx/xxxxxx/
/
06
061235
index.html
dgnet
index.html
story.html
061236
examine.html
picture.jpg
staging に接続したところ
staging の Ｗ３のフォルダをオープン
dgnet フォルダをオープン
ページの更新
(1) HTMLファイルの編集・新規作成
(2) staging へのアップロード
(3) [Step5] staging  w3 へのコピー
(4) 確認
ファイルの保存場所は？

Staging からページをダウンロード