1 / 25

Web Page の作成と公開

Web Page の作成と公開. 2003.01.13 ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko. 今日の目標. WWW のしくみを理解する HTML タグがある程度理解できるようになる ICU の Web ページ発行手順を理解する とりあえず自分のページを作成する. WWW サーバーのしくみ. HTML とは？. ブラウザで表示. HTML ファイル. index.html. 基本的な HTML の構成. ICU の Web ページ発行手順. ページ公開の準備. ユーザ登録

orenda
Download Presentation

Web Page の作成と公開

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  3. WWWサーバーのしくみ

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

  5. 基本的な HTML の構成

  6. ICUのWebページ発行手順

  7. ページ公開の準備 • ユーザ登録 w3 のトップページ　　　　　　　　　　　　から、 • [Step1] (アカウントの作成) • [Step2] (パスフレーズの設定) を行なう　　　　　　※Step3 は必要ありません この作業は１回だけやればよい！

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

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

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

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

  12. w3 へコピー [Step5]

  13. w3 へコピー [Step5]

  14. サーバー(W3) 側では 061234 http://w3.icu.ac.jp/xx/xxxxxx/ 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 index.html dgnet http://w3/xx/xxxxxx/dgnet/ story.html http://w3/xx/xxxxxx/dgnet/story.html (staging) examine.html picture.jpg

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

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

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

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

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

  25. HTMLタグ 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> TABLE タグは他にもいろいろな用途が...

More Related