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