web page
Download
Skip this Video
Download Presentation
Web Page の作成と公開

Loading in 2 Seconds...

play fullscreen
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

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

ブラウザで表示

HTML ファイル

index.html

slide7
ページ公開の準備
  • ユーザ登録

w3 のトップページ            から、

    • [Step1] (アカウントの作成)
    • [Step2] (パスフレーズの設定)

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

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

slide14
サーバー(W3) 側では

061234

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

index.html

/

06

061235

index.html

dgnet

story.html

061236

examine.html

picture.jpg

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

slide16

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

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

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

(4) 確認

ページの更新についてのポイント
slide17
ファイルの保存場所は?
  • Staging からページをダウンロード
slide18
ファイル名の約束

重要!

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

HTMLタグ

HTML タグの種類
  • 挿入するもの

<BR><HR> など

  • 挟み込むもの

<TITLE>タイトル</TITLE>

<H1>見出し</H1>

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

<UL>

<LI>箇条書き</LI>

</UL>

slide20

HTMLタグ

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

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

slide21

HTMLタグ

文字の装飾
  • ヘッダー

<H1>見出し</H1>

<H2>見出し</h2>

<H3>見出し</h3>

  • フォントの色

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

slide22
<UL>

<LI></LI>

<LI></LI>

<LI></LI>

</UL>

HTMLの作成

ファイルの転送

W3へコピー

<OL>

<LI></LI>

<LI></LI>

<LI></LI>

</OL>

HTMLの作成

ファイルの転送

W3へコピー

HTMLタグ

箇条書き
slide23

HTMLタグ

画像ファイルの挿入

<IMG SRC="graph.jpg"

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

  • ALT 属性は、テキストブラウザ、音声読み上げなどのために必要
  • ファイルをアップロードするときは、画像ファイルも忘れずに!
slide24

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

ad