Web page
This presentation is the property of its rightful owner.
Sponsored Links
1 / 25

Web Page の作成と公開 PowerPoint PPT Presentation


  • 64 Views
  • Uploaded on
  • Presentation posted in: General

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

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.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」「-」(ハイフン)「_」(アンダーバー)[email protected] 」はダメ!

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

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


  • Login