Web page
Download
1 / 25

Web Page ?????? - PowerPoint PPT Presentation


  • 95 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Web Page ??????' - orenda


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Web page

Web Page の作成と公開

2003.01.13

ネットワーク情報活用

ILC Office /ILP

KOBAYASHI Tomoko


Web page
今日の目標

  • WWWのしくみを理解する

  • HTMLタグがある程度理解できるようになる

  • ICUのWebページ発行手順を理解する

  • とりあえず自分のページを作成する


Web page
WWWサーバーのしくみ


Web page
HTML とは?

ブラウザで表示

HTML ファイル

index.html


Web page
基本的な HTML の構成


Icu web
ICUのWebページ発行手順


Web page
ページ公開の準備

  • ユーザ登録

    w3 のトップページ            から、

    • [Step1] (アカウントの作成)

    • [Step2] (パスフレーズの設定)

      を行なう      ※Step3 は必要ありません

      この作業は1回だけやればよい!


Staging step4
staging へアップロード [Step4]


Staging

[Step 4]

staging に接続したところ


Staging1

[Step 4]

stagingのW3のフォルダをオープン


Dgnet

[Step 4]

dgnet フォルダをオープン


W3 step5
w3 へコピー [Step5]


W3 step51
w3 へコピー [Step5]


Web page
サーバー(W3) 側では

061234

http://w3.icu.ac.jp/xx/xxxxxx/

index.html

/

06

061235

index.html

dgnet

story.html

061236

examine.html

picture.jpg


Web page
フォルダの構造と 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

(1) HTMLファイルの編集・新規作成

(2) staging へのアップロード

(3) [Step5] staging  w3 へのコピー

(4) 確認

ページの更新についてのポイント


Web page
ファイルの保存場所は?

  • Staging からページをダウンロード


Web page
ファイル名の約束

重要!

  • 拡張子は.htmlをつける

  • トップページは index.html とする

  • ファイル名に日本語は使わない

    • 「a…z」「A…Z」「0…9」「-」(ハイフン)「_」(アンダーバー)×「/」「@」「スペース 」はダメ!

  • 大文字・小文字に気をつける

  • dgnetフォルダは必ず小文字で!


Web page

HTMLタグ

HTML タグの種類

  • 挿入するもの

    <BR><HR> など

  • 挟み込むもの

    <TITLE>タイトル</TITLE>

    <H1>見出し</H1>

    <A HREF="">リンク</A>

    <UL>

    <LI>箇条書き</LI>

    </UL>


Web page

HTMLタグ

改行やレイアウトについて

  • 改行するには、<BR>タグなどが必要

  • HTMLファイルでは、複数のスペースや改行はスペース一つ分と同じ

  • <H>タグや <UL>タグ、<P><BR>、

    <TABLE>タグなどを利用する


Web page

HTMLタグ

文字の装飾

  • ヘッダー

    <H1>見出し</H1>

    <H2>見出し</h2>

    <H3>見出し</h3>

  • フォントの色

    <FONT COLOR="red">文字の色</FONT>


Web page

<UL>

<LI></LI>

<LI></LI>

<LI></LI>

</UL>

HTMLの作成

ファイルの転送

W3へコピー

<OL>

<LI></LI>

<LI></LI>

<LI></LI>

</OL>

HTMLの作成

ファイルの転送

W3へコピー

HTMLタグ

箇条書き


Web page

HTMLタグ

画像ファイルの挿入

<IMG SRC="graph.jpg"

ALT="アンケートの結果">

  • ALT 属性は、テキストブラウザ、音声読み上げなどのために必要

  • ファイルをアップロードするときは、画像ファイルも忘れずに!


Web page

HTMLタグ

リンク

  • 同じページに表示

    <A HREF="next.html">次へ</A>

  • 別のウインドウに表示

    <A HREF="others.html"TARGET="_blank">

    xxxのページへ</A>


Table

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