1 / 24

Web Page の作成と公開

Web Page の作成と公開. 2002.10.08 ILC Office / ILP KOBAYASHI Tomoko. 今日の目標. WWW のしくみを理解する HTML タグがある程度理解できるようになる ICU の Web ページ発行手順を理解する とりあえず自分のページを作成する. WWW サーバーのしくみ. HTML とは？. ブラウザで表示. HTML ファイル. index.html. 基本的な HTML の構成. HTML タグの種類. 挿入するもの <BR><HR> など 挟み込むもの

bryony
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 の作成と公開 2002.10.08 ILC Office /ILP KOBAYASHI Tomoko

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

  3. WWWサーバーのしくみ

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

  5. 基本的な HTML の構成

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

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

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

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

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

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

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

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

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

  15. ユーザ登録 w3 のトップページ　　　　　　　　　　　　から、 • [Step1] (アカウントの作成) • [Step2] (パスフレーズの設定) を行なってください。 Step3 は必要ありません。

  16. staging へアップロード (Step4)

  17. w3 へコピー (Step5)

  18. フォルダの構造と URL の関係 http://w3.icu.ac.jp/xx/xxxxxx/ index.html W3 index.html dgnet http://w3/xx/xxxxxx/dgnet/ story.html http://w3/xx/xxxxxx/dgnet/story.html examine.html picture.jpg

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

  20. staging に接続したところ

  21. staging の Ｗ３のフォルダをオープン

  22. dgnet フォルダをオープン

  23. (1) HTMLファイルの編集・新規作成 (2) staging へのアップロード (3) [Step5] staging  w3 へのコピー (4) 確認 ページの更新

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

More Related