Taro-ホームページB5.jtd

Transcription

1 4 タグの 基 本 (Ⅳ) 画 像 基 本 19 1 <img src="ファイル 名 "> 画 像 を 入 れる <img src="ファイル 名 " alt=" 文 字 列 "> 2 <img src="ファイル 名 " width=" 画 像 の 幅 " height=" 画 像 の 高 さ"> 画 像 の 大 きさを 指 定 する 3 <img src="ファイル 名 " border=" 枠 の 幅 "> 画 像 に 枠 を 付 ける 4 <img src="ファイル 名 " align=" 位 置 "> 画 像 に 文 字 列 を 回 り 込 ませる <br clear="all"> 回 り 込 みを 中 断 させる 5 <img src="ファイル 名 " hspace=" 数 値 " vspace=" 数 値 "> 画 像 の 周 囲 にマージンを 設 定 する 作 業 終 了 後 [hp19.html]で 保 存 1 <img src="ファイル 名 "> 画 像 を 表 示 する <img src="ファイル 名 ">のタグは 画 像 を Web ヘ ーシ に 表 示 します < ="ファイル 名 ">は 画 像 のファイル 名 です また <img src="ファイル 名 " alt=" 文 字 列 ">と alt=" 文 字 列 " を 付 け 加 えますと 画 像 が 表 示 されない 場 合 に alt で 指 定 した 文 字 列 が 画 像 に 代 わって 表 示 されます ファイル 名 の 指 定 は ファイルがどこのフォルダに 保 存 されているかによって 異 なり ます ファイル 名 の 指 定 方 法 には 2つあり 一 つは 絶 対 パスと 呼 ばれる 指 定 方 法 で 今 ひとつは 相 対 パスと 呼 ばれる 指 定 方 法 です 絶 対 パスによる 指 定 方 法 とは ルートディレクトリから 目 的 のファイルがあるディレクトリまで ディレクトリ を 階 層 順 につなぎ 最 後 にファイル 名 を 指 定 する 方 法 です 例 えば 最 上 層 にルートディレクトリがあり 次 の 階 層 に chair というフォルダと rest というフォルダがあり

2 さらに rest のフォルダの 中 に(rest の 次 の 階 層 に) hana2 というフォルダ があって その 中 に 目 的 の 画 像 ファイル p jpg があるとしま すと p jpg の 画 像 ファイルは 次 のように 指 定 されます /rest/hana2/p jpg 指 定 のパスを 終 わりから 追 っていけば 多 分 理 解 できるかと 思 いま す p jpg は hana2 のフォルダにありますから hana2/p jpg と 指 定 され kana2 は rest のフォルダにありますから 上 の 指 定 の 上 につけて rest/hana2/p jpg と 指 定 され さらに 最 上 層 はルートディレクトリですから 最 終 の 指 定 は /rest/hana2/p jpg ということになります ルートディレクトリー char rest hana2 p jpg 次 に 相 対 パスによる 指 定 方 法 とは 現 在 のフォルダ(カレントフォルダ=カレントディレクトリ)から 目 的 のファイルを 指 定 する 方 法 です 上 の 例 でカレントディレクトリが rest だとしますと 先 ず カレントファイルからのパスと 目 的 ファイルへのパスを 両 者 の 共 通 ディレクトリを 頂 点 として 通 します rest/abc.html 1 rest/hana/p jpg 2 次 に 1パスのディレクトリ 数 を 数 え 一 つなら. 二 つなら.. とし それを2パスの 共 通 ディレクトリに 代 入 これがパス 指 定 となります./hana2/p jpg よって カレントディレクトリが hana2 の 場 合 のパス 指 定 は./p jpg となります また./ は 省 略 できますので この 場 合 には 単 に p jpg という 指 定 もできます

3 <title> 情 報 機 器 の 操 作 - 画 像 を 表 示 する</title> <img src="p jpg"> この 例 は p jpg の 画 像 が カレントディレクトリに 保 存 されているば あいの 相 対 パスによる 指 定 方 法 です 2 <img src="ファイル 名 " width=" 画 像 の 幅 " height=" 画 像 の 高 さ"> 画 像 の 大 きさを 指 定 する 画 像 を Web ページに 入 れる 場 合 画 像 が 大 きすぎる 場 合 があります その 場 合 画 像 の 大 きさを 調 整 して Web ページに 挿 入 します <img src="p jpg" width=" 数 値 " height=" 数 値 "> のタグを 使 います < width=" 数 値 ">は 画 像 の 横 幅 を 指 定 し < height=" 数 値 ">は 画 像 の 縦 幅 を 指 定 します < width=" 数 値 "> < height=" 数 値 "> の 数 値 は ピクセル 数 または % です ピクセル 数 は 画 像 の 大 きさを 絶 対 的 に 指 定 しますが %は ブラウザのウィンド 幅 に 対 する 比 率 になります したがって ピクセル 数 による 大 きさの 指 定 で 元 の 画 像 の 縦 横 比 を 保 持 して 縮 小 拡 大 表 示 したい 場 合 には 元 の 画 像 の 縦 横 比 にあわせて ピクセル 数 を 指 定 しなけ ればなりません <title> 情 報 機 器 の 操 作 - 画 像 の 大 きさを 指 定 する</title> <img src="p jpg" width="100" height="50"> 3 <img src="ファイル 名 " border=" 枠 の 幅 ">

4 画 像 に 枠 をつける 画 像 に 枠 をつけたいときは <img src="p jpg" border=" 数 値 "> のタグを 使 います < border=" 数 値 ">の 数 値 は ピクセル 数 です <title> 情 報 機 器 の 操 作 - 画 像 に 枠 をつける</title> <img src="p jpg" border="4"> 画 像 にリンクを 設 定 した 場 合 画 像 にリンクを 設 定 しますと 画 像 の 枠 がリンクの 色 で 表 示 され ますが この 枠 が 邪 魔 で 消 去 したい 場 合 には この border を 0 で 指 定 しますと 画 像 の 枠 線 を 消 すことが できます 4 <img src="ファイル 名 " align=" 位 置 "> 画 像 に 文 字 列 を 回 り 込 ませる 文 字 列 の Web ページに 画 像 を 挿 入 しますと 画 像 の 横 に 文 字 列 が1 行 のみ 表 示 され 2 行 目 以 降 は 画 像 の 下 に 表 示 されてしまいます そこで 画 像 の 横 に2 行 目 以 降 も 表 示 したい 場 合 には <img src="p jpg" align=" 位 置 ">のタグで 文 字 列 の 回 り 込 みを 指 定 します < align=" 位 置 ">の" 位 置 "は left と right が 指 定 できます left は 画 像 を 左 端 に 指 定 しますから 文 字 列 は 画 像 の 右 側 に 回 り 込 みます right は 画 像 を 右 端 に 指 定 しますから 文 字 列 は 画 像 の 左 側 に 回 り 込 みます left も right もともに 文 字 列 が 画 像 の 横 で 一 杯 になりますと 文 字 列 は 画 像 の 下 に 表 示 されます align=" 位 置 "の" 位 置 "に top middle absmiddle bottom を 指 定 画 像 の 横 に 文 字 列 を 回 り 込 ませると

5 文 字 列 の 縦 位 置 は 画 像 の 下 端 に 揃 えられます しかし align=" 位 置 "の" 位 置 "に top middle absmiddle bottom を 指 定 します と 文 字 列 の 縦 位 置 を 指 定 できます top は 画 像 の 上 端 に middle は 画 像 の 中 央 ( 文 字 列 のベースラインが 画 像 の 中 央 )に absmiddle は 文 字 通 り 画 像 の 中 央 に bottom は 画 像 の 下 端 に 指 定 されます <title> 情 報 機 器 の 操 作 - 画 像 に 文 字 列 を 回 り 込 ませる</title> <img src="p jpg" align="left"> 情 報 機 器 の 操 作 <br> 文 学 部 <br> 教 育 学 部 <br> 人 間 文 化 学 部 なお 文 字 列 の 回 り 込 みを 文 字 列 の 途 中 で 中 断 させたい 場 合 には 中 断 させたい 文 字 列 の 位 置 に <br clear="all">を 指 定 します そうすることによって 文 字 列 の 回 り 込 みは 中 断 し 指 定 された 文 字 列 以 降 は 画 像 の 下 に 表 示 されます 5 <img src="ファイル 名 " hspace=" 数 値 " vspace=" 数 値 "> 画 像 の 周 囲 にマージンを 設 定 する 文 字 列 の Web ページに 画 像 を 挿 入 し 文 字 列 の 回 り 込 みを 指 定 しますと 画 像 の 横 に 文 字 列 が 回 り 込 んで 表 示 されましたが 画 像 と 文 字 列 との 間 には スペースがありません そこで 画 像 と 文 字 列 の 間 にスペースが 欲 しい 場 合 には <img src="p jpg" align="left または right" hspace=" 数 値 " vspace=" 数 値 ">のタ グで 画 像 の 周 囲 にスペースを 設 定 します < hspace=" 数 値 ">は 画 像 の 左 右 にスペースを 空 け

6 < vspace=" 数 値 ">は 画 像 の 上 下 にスペースを 空 けます < hspace=" 数 値 "> vspace=" 数 値 "の" 数 値 "は ともにピクセル 数 での 指 定 です <title> 情 報 機 器 の 操 作 - 画 像 に 文 字 列 を 回 り 込 ませる</title> <img src="p jpg" align="left" hspace="30" vspace="10">

7 5 タグの 基 本 (Ⅴ) BODY 基 本 20 1 <body bgcolor=" 色 "> 本 文 body 全 体 に 背 景 色 を 指 定 します 2 <body background="ファイル 名 "> 本 文 body の 背 景 に 画 像 を 入 れます 3 <body leftmargin=" 数 値 "> body の 左 にマージンを 設 定 する 4 <center> 文 字 列 画 像 表 </center> 文 字 列 を 中 央 にそろえる 作 業 終 了 後 [hp20.html]で 保 存 1 <body bgcolor=" 色 "> 本 文 ページの 背 景 に 色 を 指 定 する ページの 背 景 の 色 を 指 定 するには <body bgcolor=" 色 "> 本 文 のタグを 使 用 します 色 の 指 定 は " 色 の 名 前 " または "カラーコード"によります 色 を 指 定 しない 場 合 は 使 用 しているブラウザで 設 定 されている 色 が 表 示 されま す <title> 情 報 機 器 の 操 作 - 背 景 色 を 指 定 する</title> <body bgcolor="yellow"> 情 報 機 器 の 操 作 2 <body background="ファイル 名 "> 本 文 ページの 背 景 に 画 像 を 指 定 する 画 像 の 指 定 するには 絶 対 パスによる 方 法 と 相 対 パスによる 方 法 があります ともに 基 本 19-1を 参 照 してください <title> 情 報 機 器 の 操 作 - 背 景 に 画 像 を 設 定 する</title>

8 <body background="p jpg"> 情 報 機 器 の 操 作 3 <body leftmargin=" 数 値 "> ページの 左 にマージンを 設 定 する <body leftmargin=" 数 値 "> の 数 値 は ピクスル 数 です 上 余 白 は <body topmargin=" 数 値 ">で 指 定 できます 下 余 白 は <body bottommargin=" 数 値 ">で 指 定 できます 右 余 白 は <body rightmargin=" 数 値 ">で 指 定 できます <title> 情 報 機 器 の 操 作 -マージンを 設 定 する</title> <body leftmargin="30"> 情 報 機 器 の 操 作 4 <center> 文 字 列 画 像 表 </center> <center></center>は 文 字 列 や 画 像 や 表 を Web ページの 中 央 にそろえます <title> 情 報 機 器 の 操 作 - 段 落 を 中 央 にそろえる</title> <center> 情 報 機 器 の 操 作 <br> 文 字 列 画 像 表 を 中 央 にそろえる</center>