紘 蒜 甜

基本^的な構 造

<

F r r h 4 L

>

<

H E A D

^>

<

T r r L E

^>

T E S T 且 O M E P A G E

<

r r l T 1

^.

E

^>

く

/1 1 E A D

^>

<

B O D Y

^>

H E L L O W !

< B O D Y

>

<

n r r M L

^>

h l m r フ ァ イ ル の

内 容

講 習会^の流れ

講 習

･

ホ

^ー

^{ム ペ}

ー

ジ の 仕 組 み

･

m で 用 ^い られ る基 本 技 術

◆

基 本 的 なdt 丑

･

タグ

^ー

覧

･

ダイナ ミ ッ クな W W W

･

そ の 他 の 技 術

･

ソフ ト ウ

^ェ

ア の メリ ッ ト

･

ホ

ー

^{ム ペ}

ー

ジ 作 成 に あ た っ て

実 習

･

ホ

ー

^{ム ペ}

ー

ジ の 作 成

◆

ブラウ ザ で 阿 覧

●

オ リ ジ ナ ル

ホ

^ー

^{ム ペ}

^ー

^{ジ の} 作 成

w w w で用^いられる基 本技術

W W W

(

^{W o r ld W id e W e b}

)と は

世 界 中 r = 広 が っ て い る

什

報 シ ス テ ム

.

H T M ^L

J

H y p ^{e r} T e x t M a r k tJ P I ^{』 n} g ^{u a} g ^e

)

ハ イ ^パ

^ー

テ キ ^ス トを肥 述 す るた め の 青 函

.

く>

内 ^に 指 定 され たタ グと呼 ば れ る 予 約 臨 ^{r こ} よ ^っ て

.

他 ^の 文 暮

^へ

^{の リ ン ク や} 文 暮 ^の 整 形 を行う

^.

H T T P

(

^H y p ^{e r} T e x ( T r a n s f e r P r o t o c o l

)

w w w ク ラ イア ン ト/ サ

^ー

バ n ^Z l ^の プ E) ト コ ル

.

U R I

(

^{U n i}

^v

^{e r s a l R} e s o u r c e l d e n t i fi e r

)

さ まぎ まなリ ソ

^ー

ス に 対 す る統

^一

的 な 名 甘 r 付 け の 手 法

タグ^{につ い}て

<

H T M 1

.>

<

t M

^>

<

T I T L Jh

T E S T H O M E P A G E

<

r r t T L E

>

< /1 1 W

^>

<

B ( ) D Y

^>

M E L L O W !

く

/ 丑O D Y

>

く

/ m L

^>

< H T M 1

,

>

^‑

< / H T M L ^>

･ ‑ I

h l

m

J 文 書 ^で あ る ^こ とを

土 丁 す るた め ^の タグ

< H E A D ^>

^‑

^< 什I E A D ^>

= ･.

h t

m

] 文 暮 の

^ヘ

ッ ダ用 の

紘蒜 甜

^{的 な}

< R O D Y >

^‑

< / B O D Y >

‑ ‑

文 暮 の 本 文 が 把 速 され る

タグ ^一 覧(¹)

H T M L

文書の基本 構造^に用^いられ るタグ

< H T M L ^{> <} H E A D > < T I T L E > < B O D Y >

< !

^{‑ ‑}

^> & l t & g ^t & a m p & q u o t ヘ ッ

ダ部^に記 述するタグ

< B A S E > < IS I N D E X > < M E T A > < S T Y L E >

< ! D O C T Y P E ^>

タグ ^一 覧(³)

リスト形 式にするタグ

< U L > < Ll > < O L > く D L > く D T > < D D > < D I R >

<

M E N U >

リ

ン

クを設定す るタグ

<

A >

画像^･音 声を利 用するタグ

く 1 M G ^{> <} M A P ^{> <} A R E A ^>

表を作成す るタグ

< T A B L E > く C A P TI O N ^{> <} T R ^{> <} T H ^{> <} T D >

ダイナミックな^{w w w}

P H P ( ^P

e r s o n a

l 日

o me

P

a

g

^e

)

動的 に

W e

b

^ペー

ジを生成 するた め の

^Wc

b ア プ リケ

^ー

シ

ョ

ン 開発 音持 ( シ ス テ ム) C G I ( ^C

^{o m mo n}

^G

^a

^t

^{e wa}

y T

ⁿ

^t

^{e r}

f

a c e

)

サ

ー

^{バ 側 に ある ア プ リ ケ}

^ー

^シ

^ョ

^{ン を実行 し}

^,

^{そ の 結果をク ラ イア ン トの}

ブ ラ ウ ザ に 反 映

.

S S I ( ^S

^{e r v e r}

^{S i d}

^e

^I

^{n c}

^l

^u

^d

^{e s}

)

H

T ML

ドキ

^ュ

メ

ン

ト内 に 妃 述

.

^サ

^ー

^{バ 側 で 外 部プ}

^ロ

^{グ ラム を実 行 L そ の 結果 を}

クライ アン ト 側 の ブラ ウザ の 表 示 画 面 に 反 映さ せ る

.

J

a v a

ア プ レ ッ ト

オブ _{ア プ} ジ _リケ

^ェ

クト

ー

指 向書信

.

^{ア プ レ}

^ッ

^{ト( 実 行 モ ジ}

^{ュ ー}

^{ル ) と呼ば れ る}

シ

ョ

ン を

weh

ブ ラ ウザ 内 で 動作

.

J

a v a

S

c r

i p ^l

H T M L の 機 能を拡張 する ス クリ プ _ト

.

H T M L の 文 書 内 ^{に ス} ク リ プ ト を 埋 め こみ クラ イア ント 側 の ブ ラ ウザ で 実行

.

タグ ^一 覧(²)

ボデ

ィ

部に記 述する 基本的 なタグ

く H n > < F O N T > < B A S E F O N T > く A C R O N Y M >

< A D D R E S S > < B > < B I G > < B L O C K Q U O T E ^>

< C I T E > < C O D E > < D E L ^{> <} D F N ^{> <} E M ^{> <} Ⅰ ^>

< I N S > < K B D > < P R E > < Q ^{> <} S > < S A M P >

く S M A L L ^{> く} S T R I K E ^{> <} S T R O N G > < S U B >

く S U P ^{> <} T T ^{> <} U ^{> <} V A R ^{> く} H R ^{> <} P > < B R >

く N O B R > < W B R > < D I V > < C E N T E R >

タグ ^一 覧(⁴)

フ レ^ー ムを表示するタグ

く F R A M E S E T > く F R A M E > < N O F R A M E S >

フ ォ^ー ムを作成 するタグ

く F O R M > く I N P U T > < T E X T A R E A >

< S E L E C T > < O P T I O N ^>

そ^の他のタグ

< S P A N ^{> <} E N B E D > < N O E N B E D >

く S C R IP T > < A P P L E T ^{> <} P A R A M ^>

そ^の他^の技 術

X M I

.(

^{e X t e n s ib l e M a r k u} p L ^{a n} g ^{u a} g ^e

)

H T M L の ような シ ^ン プ ル な フ ォ

^ー

マ _ッ ト で 文 暮 構 造 を 妃 述 で き

,

独 自 にタグ を定 義 ^で きる ^こ とが 特 徴 の マ

^ー

ク ア ッ プ 音 詩

^.

C S S

(

^{C a s c a d i n} g S ^t y l ^e S h e e t s

)

H T M L の 見 栄 え を定 義 す る ^ス タイ ル シ

^‑

トを‡ 己述 す る た め の 言 語 仕 様

^.

F r P

(

^{Fil e T r a n s f e r P r o t ∝ o 1}

)

ネ ッ ト ワ

^ー

ク上 の クライ ア ン トとホ ス ト ^コ ン ピ

^{ュ ー}

タと の 間 で

,

フ ァ イ ル の 転 送 を行 なうた め の プ ^ロ ト コ ル ( また は そ れ を実

装

した ^{コ マ ン} ド)

^.

‑ 90 ^‑

ホ ^{ー ムペ ー} ジ作^{成に当 た}

^っ

^て(¹)

｢ホ ^{ー ム}

^ペ

^ー ジ 作 成時^の注意点J

●

ブラウ ザ に よる 表 ^{示 の} 違 ^い

.

｡

フ ァ イ ル サ イズ の 大 き い 寒 色 を載 せ な ^い

^.

｡

ペ

ー

ジ サ イズ を 大 きくしな い

.

^{(a ( 菅 会 で は 横 8 0 0 r :}

^.

^{ソ ト )}

●

ペ

^‑

ジタイト ル は 半 角 英 数 字 で

.

^また

^.

^{ト ッ プ ベ}

^‑

^{ジ の}

名 前 ^はi

^{J l}

^d

^{e x.}

^{h l}

^m

ほ た は ⁱ

ⁿ

^d

^{e x.}

^{h t}

^m

で

^.

｡

内 容 は 自 己 暮 任

.

｡

他 人 を 中 ≠ す る書 己述 ^{は し} な ^い

.

●

手 作 托

^･

肖 像 権 に 注 意

.

｡

リ ン クをS& るとき は 相 手 ^に !午可 をとる

̲

●

捷 租 依 存 文 字 を使 用 し な い

.

ホ ^{ー ム ペ ー} ジ作 成

｢作 成^の流^れ｣

w

o r

d l 0 0 0 の 起 h

ホ

ー

^{ム ペ}

ー

ジを 律 成 す るた ぬ w

B r

d l O O O を

】

巳血 す も ホ

^‑

ム ペ

^‑

ジ の 作 成

w

D r

d 2 0 0 0 を蛙 用 し て 見 栄 え の 良 い ホ

^ー

ム ペ

ー

^{ジ を 錬 成す る}

.

w e b ペ

^ー

ジ と して 保 存

フT イ ル を h l

m

l 形 式 で 保 存 する

.

ブ ラ ウザ ソフ トで 社 EB

T

n

L

e r n e [

E q

^'

I

o r E r

を使 用 し て ど の J

:

う に 見 え る か * JZ す る

.

ハ イパ

^‑

リ ン ク の 設 定

ハ

イ パ

^ー

リ ン クを丑 定 す る

.

ホ

ー

^{ム ペ}

ー

ジ の Jt ヰ

w w W サ

ー^J

^{( T= 作 成し1}

⁼

^{フ ァ イ ル や っ オ ル ダ を転 送 し}

^.

^{告 持 す る}

^.

ソ フトウ

^ェ

ア の メリット

ソ フ トウ

^エ

ア の

E ヨ

^{ソ フ トウ}

^エ

^{ア 名 使 い やす 壬}

n T M L f = つ い て の

E コ

ワ

^ー

プ _{ロ ソフ} ト W O J u

,

‑

太 郎 な ど

ワ

^‑

プ ロ 古 X で

作 成 で きる

ほとん ど A + rj い

ホ

ー

^{ム ペ}

^ー

^{ジ F}

^{r o E L}

^{( P q}

^E.

作 J & I 用 ^{ソフ ト} ホ

‑

^{ム ペ}

^ー

^{ジビ ル ダ}

ー

な ど

テキ ス ト エ デ _ィ タ メ モ ■

_,

ワ

ー

^ド

^J

^{( ツト な ど タグ を 知 らな い と}

作 成 で きな い

【≡コ

作 成^手順

｢ホ ^{ー ムペ ー} ジの作 成(¹)^｣

･

見 出し の入 力

1

.

^{｢ 仕 事 の 仲 報 J と 入 力}

^.

2

.

^{同様 [ = r お 薦 め の ペ}

ー

^ジ J

.

r 連 絡 先 ｣ を入 力

.

¹

,

^{｢ 仕 事 の 稚 報 1}

^,

^{r お 薦 め の ペ}

ー

^{ジ ｣}

r 連 絡 先 ｣ を選 択 ^し｢ 見 出 しl ｣ に

.

( 右 図 参 照 )

4

.

^{入 力 し} た 文 字 を選 択 し

^,

文 字 サ イ ズ の ポ イン ト を ｢ 1 8 J

.

r ボ

^ー

^ル ド ｣ l こ

.

DLB ti] d ■

E1

ヲ ▲ ヽ q

作 成手^順

｢ホ ^{ー ム ペ ー} ジの作 成(³)^｣

内 容

の 入

力(

^{JL や す くす るT}

⁼

^{e ) 文 事先q ll}

^こ

^{タ フf L}

^つ

^{入 れ る}

)

)

.

^{r 役鞍 ｣ の 下J = 役敬を 紀述}

.

1 r * 梓 内 容 J の 下 に 集稚 内 容 を 紀 述

.

3

.

^{* 舞} 内 容 の 下 に 空 行 を 2 行 あ け る

.

4

.

^{r お 葡 め の ペ}

ー

^{ジ ｣ の 下r =}

^.一

^{行 あ け て}

r 三 玉 大 苧 )

,

r 三 重 大 学 ^工 学 缶J

.

｢ 三 重 大 学 ^工 学 部技 ^前 部 ｣ と入 力 し 空 行 を 2 行 あ け る

5

.

^{r 三 玉 大 学 J J 三 五 大 学 工 学 部 ｣}

^.

r 三 J [ 大 学 工 学 部 技q ⁱ 部 ^｣ を選 択 し

r 箇 条 書 き ｣ に

.

h

.

^{r 電 子 メ}

ー

^{ル ア ドレ ス ｣ の 下 に}

メ

ー

^{ル アド レ ス を 入 九}

作 成手順

｢諸設定｣ ホ ^{ー ム}

^ペ

^ー ジの表示 サ イ ズ. 及 び ブラ ウザソ フトの表示 に関する設定

1

.

^{ト ソ}

^ー

^{ル J}

^‑

^{｢ オプ シ ョ ン｣}

‑^‑

^{｢ 全} 般 ｣ か らr H T M L 即 連 は

早 也r = ピ クセ ル を使う J の

芸^･軍 I 蓋≡̲^..‑{^‑= 1

チ

^ェ

ッ クボ ッ ク ス r = r レ) をチ

^ェ

ブ ク

. ^tar‑^t‑

2

.

^{r W}

^e

^{b オ プ シ ョ ン J をクリ ッ ク}

.

3

.

^r

^一

^{般 ｣ を 3 1 訳 し｢ 以 下 の}

ブ ラ ウザ で 表 示 で 書 な い 機 能を わ効 に す る ｣ の チ

^ェ

ッ クボ ッ ク ス に｢ レ｣ を チ

^ェ

ッ ク

,

4

.

^{r 図 J を3L 択} し｢ 画 面 の サ イ ズ J を r _{則 托 )}

メ

61Jl りに

,

漂ミ^L

^;

:

:

i

^l

"

I n

^Jk, . ㌔

I

.

公

¹

払

m .1 ‑..I.

. ll

.三

̲^{̲ ‥･}

･ ‑ ^‑

作成手 順

｢ホ ^ー ム ^{ペ ー} ジの作^成(²)^｣

内容の入 力

1

.

^{r t t 書 の f 一報 ｣ の 下 に}

一

^{行 あ け て}

r 役 q L｣ と入 九 そ の 下 の 行 に r 兼携 ^内 容 ｣ と入 力

.

2

.

r 投鞍 j

,

｢ 兼 務 内 容 ｣ を叢 訳 し

文 字 サ イ ズ の ポ イン ト を ｢ Ⅰ4 J に

.

ま た｢ ボ

ー

^{ル ド ｣ に}

.

3

.

^{同 様( = ｢ 連 絶 先 j の 下 l =}

一

^{行 あ け て}

｢ t 子 メ

^ー

ル アドレ ス J と入 力 し

,

文 字 ^{サ イズ の} ポ イ ン ト を ^{r 1 4} J に

.

ま たr ボ

ー

^{ル F J に}

^.

･

tt ■

o )

〜 +

I l l

■ ■iヽ■

･

お J め の

^べ‑ ⁷

^}

･

^{暮 ■5t}

ll . ■‑^I, ¹

作成手順

｢ ホ ^ー ム

^ペ

^ー ジの作 成(⁴)^｣

ハ

イ

パ

^ー

リ ン

ク

の

設定

1

.

r お 札 ^{め の べ}

^‑

^ジ ｣ の 下 の

r 三 五 大 苧 ) を 適 訳 し ^T 挿 ^入 j

･^‑

^r

^ハ

^イパ

ー

^{リ ン ク} J

‑

r _{h tL} p

⁼

^/ /

^ww v.^m

ⁱ

^e･u,^{a e}.

^{j 叶 と入 力}

ー

2

.

^{r 三 玉 大学 工 学 部 ] を逝 択 しr 挿 入 J}

‑

r

ハ

イ

^′

(

^‑｡

) > ク _J

^‑

r h l

l

P

^:

^//

^{W 叩}.^{C O}

^B

.^m

ⁱ

^c‑^{l uC}

j p J と入 力 3

.

^{r 三 J L 大 学 工 学 部 技 砥 部 ｣ を Z 択 し r 挿 入 J}

‑

r ハ イ

^′

(

‑

^{リ ン ク ｣}

^‑

r h II p

⁼

//

^{l e e}

k

‑^{e n}

^名

‑^m

ⁱ

^‑･^{a ⊂}‑

^{j p/ t}

^{e c}

^{h/J と}

入 力

.

4

.

入 力 したメ

‑

^{ル アド レ ス を 五 択 し ｢} 挿 入 ｣

‑

｢ ハ イパ

ー

^{リ ン ク｣}

^‑

^{｢ t 子 メ}

^ー

^{ル ア ド L}

^'

^{ス J を適 訳}

,

( ｢

^ma

ill

o l

( メ

^ー

ル 7 ドレ ス ) J とな

^っ

て い る こ と を碓 盈)

‑ 9 2 ‑

作成手 順

｢ ホ ^{ー ム}

^ペ

^ー ジの作 成(⁷)^｣

｡ タ

イト ル フ レ

^ー

ム の

追 加

】

.

右 フ レ

^ー

ム r = ポ イ ン タ を移 動さ せ る

.

2

,

^{r 暮 式 j}

^‑

^{｢ フレ}

^ー

^{ム J}

･^‑

^r 新 ^{しい フ レ}

^ー

ム( 上)

̲

^{F を五 択}

̲ .

ⁱ

.

^{上 の フ レ}

ー

^{ムJ = ポ イ ン タを 移 t b さ せ}

^,

.

. 連^写m

^,

^e

^x

^{tA ぷ}

^{, h L}

^O芸^;

^{p z}

^a

^{. g} ,

7

= J

,

と 入 力

･

5

.

^{文 字 をr セ ン タ}

ー

^{｣ に}

.

f

,

.

^{r 暮 式 ｣}

^‑

^{｢ フ レ}

^ー

^{ム ｣}

･p･^‑

^{r フ レ}

^ー

^{ム の プ ロ}

^/

^{i テ ィj で}

r l書 ｣ を ^{｢ L}

^'

⁽⁾⁽⁾ ピ クセ _{ル ｣}

.

r 高さ ｣ を ^{r lt X l} ピ クセ _{ル ｣} r =

･ タイ

トル フ レ

^ー

ム

背 景

の

変更

1

.

■■

背 景 ^{0 )} 変 更

^‑

1 司 執 =

r 暮 式 J

^‑

｢ 背 * い

^→

｢ 塗 り つ ぶ し効 果 ｣ か ら Z 択

̲

･ タ

イトル フ レ

^ー

ム の

保 存

1

,

^{タイト ル フ レ}

^ー

^{ム r = て 右 クリ ッ ク}

^ー

^{r フ レ}

ー

^{ム を 付 け て 保 存} )

‑

A‑^･

^{フ ァ イ ル 名 を r}

^[

^州

^亡

^{h L}

^m

^{｣ とす る}

,

作 成順

｢ホ ^{ー ム ペ ー} ジの作 成(⁶)^｣

目 次

フ レ

ー

ム の

L r 暮 式 j

^‑

r フ レ

ー

^ム｣

^‑

^｢ 目 次 フ レ

^ー

ム の 作 成 ｣

目 次

フ レ

^ー

ム の ^ハ

イ

パ

ー

^{リ ン}

ク 設 定 .

l

.

r 仕 事 ^の 什報 ｣ を選 択 し｢ 挿 入 ｣

^‑

｢ ハ イ

^J

(

‑

^{リ ン ク )}

‑

｢ ドキ

ュ

メ ン トを表 示 す る フ レ

^ー

ム を クリ ッ ク してくだ さ い ｣

‑

r

m 3

i

n

フ レ

ー

^{ム｣ を i E 汎}

2

.

^{同 様 r = r おj t d ) の ペ}

^ー

^{ジ ｣}

^,

^{r 連格 先J も}

. 目 次

フ レ

^ー

ム の

見

え

方 変 更

Ⅰ

.

‑ '

背書 ^の ま更

^"

同書兼に

｢ 書 式 ｣

一^‑

^｢ 背Jt ｣

^‑

｢ 塗 り つ ぶ し 効果 l か ら 遺 択 乙 文 字 サ イ ズ の ポ イ ン トを｢ 1 4 ｣ に

,

目 次

^フ レ

ー

^{ム の}

保 存

1

.

El 次 フ レ

ー

^{ム に て 右 クリ ッ ク}

.

2

･ E

⁷ + L

^'

b

T

^ム 名 を 付 け て 保 存 J

^→

フ ァ イル 名 を ^｢

c o n l C n l s･

^"

^‑

^J

作 成手 順

｢ホ ^ー ム

^ペ

^ー ジの作 成(⁸)^｣

･ 画像^の追 加

l

. m a

i

n

フ レ

ー

^ム ( 右 ^下 ) ^に ポ イ ン タ を移 動 さ せ る

.

2

.

^{r 挿 入 J}

^‑

^{r 図 ｣}

^‑

^{｢ フ ァ イ ル か ら j} を選 択 し画 像を 還 択 3

.

盟 に ポ イ ^ン タ をあ わ せ

,

右 クリ ッ ク し

,

r 園 ^の 暮 式 設 定 ｣

‑

｢ レ イ ア ウ ト｣

^‑

｢ 前 面 J r =

.

4

.

^{図 をドラ ッ グ しな がら 右 上 に}

.

5

,

｢ 暮 式 ｣

^‑

｢ フ レ

ー

ム ｣

^‑

｢ フ レ

ー

^{ム の プ ロ} パ テ ィ ｣ で r 幡 ｣ を ^{r E}

^'

U t I ピク セ ル ｣

,

r 為さ J をr 7 0† ) ピ クセ ル l に

.

作 成手順

｢ホ ^ー ム ^{ペ ー} ジの登 録(²)^｣

作 成した ホ ^{ー ム}

^ペ

^ー ジ をブ ラウ ザ^で表^示

1

.

｢ I

n

t

e r n e

t E

x

pl

^{o r e r}

｣ を起 動 す る

¹

2

.

ア ド ^{レ ス に}

｢ h tt p

^:

〟 ^t

^{e c}

b

.e n

g

^.m

i

e^‑u.a c

j

.

p / k

^{o u s}

y

^u

k

a

i / ^I ( ^{P C} 番 号) 伽 ^d

^{e x.}

^{h t}

^m

^｣

と入 力

^.

3

.

表 示 され て い るか 確 認

^.

‑ 94 ^‑