第 22 章 ウェブページの 作 成 2 画 像 の 表 示 HTMLの 細 かいタグ 自 己 紹 介 ページの 作 成 1. 画 像 を 入 れる Word の 画 面 で 画 像 ( 写 真 や 絵 )を 入 れるときは イメージそのものを 表 示 し たが ウェブページに 画 像 を 入 れるには メモ 帳 の 画 面 で 直 接 画 像 を 表 示 させることはできない 作 業 している HTML の 練 習 フォルダーに 挿 入 したい 画 像 をあらかじめ 保 存 しておく 必 要 がある 画 像 1 の 保 存 方 法 は 演 習 1 2-2で 解 説 する なお 第 12 章 2 節 でも 示 したとおり 自 分 で 撮 影 した 写 真 や 絵 以 外 は 著 作 権 がある 不 用 意 に 本 やウェブページから 画 像 を 持 ってきて 自 分 のウェブ ページに 貼 り 付 けないように 注 意 しよう また 人 物 が 映 っている 写 真 や 似 顔 絵 は 対 象 となった 人 の 肖 像 権 があるので 自 分 で 写 したからといって 使 用 できない 自 分 で 撮 っ た 画 像 と ウ ェ ブ ペ ー ジ に 画 像 を 入 れ る に は <img src="image.jpg">タグを 用 いる ここで image.jpg が 挿 入 したい 画 像 ファイル の 名 称 である これは 単 独 で 使 用 するタグであるので 終 了 タグはない <img src="image.jpg">を 一 つの 文 字 だと 思 って 好 きな 場 所 に 入 れることがで きる < img src ="image.jpg"> 画 像 の 大 きさを 指 定 する 場 合 は ピクセル 数 2 を 書 く < img src ="image.jpg" width="100" height="50"> < img src ="image.jpg" width="150" > 1 ファイルが 大 きすぎると ブラウザーで 表 示 する 場 合 に 時 間 がかかるので 20KB 程 度 で 充 分 で ある 最 近 は デジカメの 性 能 がよくなって 1 枚 の 写 真 が 1MB ほどのファイルになることもある こ のファイルをそのままウェブページに 貼 り 付 けると 通 信 時 間 が 多 くなり ウェブページを 見 る 人 は 重 くて( 画 面 を 見 るまでに 時 間 がかかって) 迷 惑 である JPEG 方 式 では 圧 縮 しても ほとんど 画 像 の 質 は 落 ちないので 見 る 人 のことを 考 えて ファイルを 小 さくするように 気 をつけよう 2 画 像 を 構 成 している 点 の 数 デジカメでは 画 素 数 にあたる - 195 -
第 5 部 コンピューターの 仕 組 み 保 存 ができたら 第 21 章 で 作 っていた hello.html に 手 を 加 えて 上 書 き 保 存 し ブラウザーで 確 認 してみよう 例 7: 画 像 を 入 れる <html> <body bgcolor=yellow> <p> 背 景 は 黄 色 にした </p> <p>hello</p> <p align=center><font size=7 color=red>html</font></p> <p>html とは<font color=blue>hyper Text Markup Language</font>の 略 である HTML にはたくさんのタグがあり それらがブラウザーに 対 する 命 令 である </p> <p><font size=5>html の 構 造 </font></p> <p>html は タグを 入 れ 子 状 にして 書 く まず HTML タグで 開 始 する </p> <p> 画 像 をいれるには IMG タグを 利 用 する <img src= image.jpg ></p> </body> </html> 2. ボールド/イタリック/アンダーライン 特 定 の 文 字 に 飾 りをつけるには 以 下 のようなタグを 用 いる 機 能 開 始 タグ 終 了 タグ 実 行 例 ボールド <b> </b> 太 字 イタリック <i> </i> イタリック アンダーライン <u> </u> アンダーライン 打 ち 消 し 線 <s> </s> 打 ち 消 し 線 3. 記 号 を 入 れる HTML では < >といった 記 号 はタグを 表 す 記 号 であるため この 記 号 自 体 を 画 面 に 表 示 させるには 特 殊 な 書 き 方 が 必 要 である またそれ 以 外 にも 特 殊 な 記 号 は 別 の 書 き 方 で 指 定 する 以 下 の 表 には いくつかの 書 き 方 の 例 を 載 せた < と > は 必 ず < > と 書 かないとブラウザーに 表 示 されないが それ 以 外 の 記 号 は かな 漢 字 変 換 で 変 換 されるものであればこのような 書 き 方 をしなくても 画 面 に 表 示 さ せることができる - 196 -
第 22 章 ウェブページの 作 成 2 記 号 書 き 方 記 号 書 き 方 < < > > それでは いままで 作 っていたウェブページのタグの 表 現 部 分 を 上 記 の 方 法 を 用 いて < や > が 表 示 されるように 改 造 してみよう 4. 改 行 する <p>~</p>の 中 で 文 章 を 強 制 的 に 改 行 したいことがある メモ 帳 の 中 でい くら 改 行 しても ブラウザー 上 では 改 行 されて 表 示 されはしない それには <br>タグを 利 用 する これも 単 独 で 利 用 するタグであり 強 制 的 に 改 行 したい ところに 入 れるとよい 5. 水 平 線 行 の 途 中 で 区 切 りのために 水 平 線 を1 本 入 れるには <hr>タグを 利 用 す る これも 単 独 で 使 うタグである <hr> 色 を lime 中 央 揃 え 画 面 の 80% 表 示 線 の 太 さ 10 ピクセルの 水 平 線 を 描 くときは 以 下 のような 指 定 をする <hr color="lime" align="center" width="80%" size="10"> 6. リンク ほかのサイトにリンクをさせるためには <a>タグを 使 う href=の 後 ろには URLやファイル 名 を 書 く また リンクを 張 る 文 字 の 部 分 を<a>と</a>ではさ む 自 分 で 作 った 別 のサイト school.html にリンクさせるためには <a href=school.html> 別 のサイトへいく</a> 外 部 のウェブページhttp://www.toyoeiwa.ac.jpにリンクをする 場 合 は <a href=http://www.toyoeiwa.ac.jp> 東 洋 英 和 女 学 院 </a> - 197 -
第 5 部 コンピューターの 仕 組 み 例 8 完 成 品 <html> <body bgcolor=yellow> <p> 背 景 は 黄 色 にした </p> <p>hello</p> <p align=center><font size=7 color=red>html</font></p> <p>html とは<font color=blue>hyper Text Markup Language</font>の 略 である <br> HTML にはたくさんのタグがあり それらがブラウザーに 対 する<b> 命 令 </b>である タグは<で 開 始 し >で 終 わるように 書 く </p> <p><font size=5>html の 構 造 </font></p> <p>html は タグを 入 れ 子 状 にして 書 く まず<HTML>タグで 開 始 する </p> <p> 画 像 をいれるには<IMG>タグを 利 用 する <img src= image.jpg ></p> <hr> 水 平 線 を 引 いた <br> <a href=http://www.toyoeiwa.ac.jp> 東 洋 英 和 女 学 院 </a> 東 洋 英 和 女 学 院 にリンクを 張 った <br><br> <a href= school.html > 私 のお 気 に 入 り</a> </body> </html> hello.html 実 行 結 果 この 段 階 では 最 後 の 行 私 のお 気 に 入 り は リン ク 先 ページがないので 開 けようとするとエラーになる 演 習 4でもう1ページを 作 ると 完 成 - 198 -
第 22 章 ウェブページの 作 成 2 演 習 1 オンライン 画 像 から 写 真 を 入 手 する 方 法 Wordなどで 使 ったオンライン 画 像 には 多 くの 写 真 が 用 意 されている 3 1. Word を 起 動 する 2. [ 挿 入 ]タブ/[ 図 ]の オンライン 画 像 を 選 ぶ 3. 表 示 された 画 像 の 挿 入 ダイアログに 秋 写 真 のキーワードを 入 れて 検 索 し 適 切 な 写 真 を 選 択 して 挿 入 をクリックし Word に 貼 り 付 ける 4. Word に 貼 り 付 いた 写 真 を 右 クリックし [ 図 として 保 存 ]を 選 ぶ 5. ダイアログボックスが 開 くので 個 人 専 用 フォルダーを 開 き ダブルク リックしてフォルダーをたどり HTML の 練 習 を 開 く 今 まで 保 存 して あった 拡 張 子 docx や html のファイルが 見 えなくても 心 配 ない 6. 自 分 にわかりやすいファイル 名 を 入 力 する 7. ファイル 名 の 下 にファイルの 種 類 を 示 す 拡 張 子 が 表 示 されているので 確 認 しておく HTML ファイルでファイル 名 を 指 定 するときは 拡 張 子 も 表 示 する 必 要 がある 写 真 の 場 合 は 拡 張 子 jpgがお 薦 めである 8. 保 存 ボタンをクリックする 3 これらの 写 真 は 学 校 が 購 入 したものであり わたしたちがウェブページの 作 成 などに 利 用 する ことができる - 199 -
第 5 部 コンピューターの 仕 組 み 2 [ 発 展 ] ペイントで 描 いた 絵 をウェブページに 載 せる 注 )ドラッグは 左 ドラッグのことです 右 ドラッグと 左 ドラッグの 動 作 は 異 なる 2-1 ペイントで 描 く 1. スタート/すべてのプログラム/アクセサリ/ペイント をクリック する 2. ツールの[ 鉛 筆 ] をクリックし 作 業 画 面 でドラッグすると 自 由 に 線 が 描 ける 3. 図 形 の[ 四 角 ] や [ 楕 円 ] をクリックし で 枠 のみか 中 塗 り かを 選 び 線 の 幅 を 選 ぶ 4. 色 1をクリックし 右 側 から 色 を 選 ぶ 色 が 足 りないときは 色 の 編 集 から 選 ぶ 色 2をクリックして 色 を 指 定 したときは 右 クリックすると 使 える 5. 作 業 画 面 で 対 角 線 をドラッグすると 形 になる マウスボタ ンを 押 し ドラッグ マウスボタンを 押 しながらマウ スを 動 かす ドロップ マウスボタ ンを 離 す [Shift キー]を 押 しながら 描 くと 真 円 や 正 方 形 を 描 くことができる 6. ツールの[ 消 しゴム] をクリックして 作 業 画 面 で 消 したい 範 囲 をドラッグすると 消 える 7. ツールの[ 塗 りつぶし] をクリックすると 枠 で 囲 まれた 部 分 に 色 が 付 く 8. [ブラシ] をクリックすると 表 現 が 変 わる - 200 -
第 22 章 ウェブページの 作 成 2 2-2 絵 をウェブページ 用 に 保 存 する 1. ペイントを 起 動 して 描 画 領 域 を 絵 の 大 きさに 合 わせるため 右 下 の サイズ 変 更 ハンドルにマウスを 合 わせ の 形 が 出 たら 調 整 す る ( 空 白 があると その 領 域 も 保 存 することになるので 描 画 領 域 は 部 分 に 限 ったほうがよ い ) 2. 絵 を 描 く 3. 編 集 メニューの[ペイントボタン/ 名 前 を 付 けて 保 存 ]を 選 ぶ ダイア ログボックスの 保 存 する 場 所 を 変 更 し 保 存 すべきフォルダーを 選 ぶ 今 回 は マイドキュメント HTML の 練 習 フォルダーを 選 ぶ 4. ファイル 名 の 欄 に image と 書 く 5. ファイルの 種 類 の 欄 から ジェーペグ ジ フ JPEG かGIFを 選 ぶ 6. 保 存 ボタンをクリック ( 注 意 ) 保 存 する 際 ファイルの 種 類 を 指 定 しないと 24ビット ビットマップ (.bmp)になる しかしペイントで 作 成 できる bmp 形 式 の 画 像 は IE でしか 表 示 されず ほかのブラウザーでは 表 示 されないし ファイルの 容 量 も 大 きく 開 けるのに 時 間 がかかる インターネットで 推 奨 されている 画 像 形 ピ ン グ 式 は 写 真 の 場 合 JPEG や PNG 絵 の 場 合 GIF である オンライン 画 像 のクリップアートでは 絵 は png 写 真 はjpgであ る ファイルの 拡 張 子 をファイル 名 の 変 更 手 順 で 変 えると ファイルが 壊 れるので 一 度 ペイントなど 画 像 処 理 のソフトに 取 り 込 んでから ファイル の 種 類 を 変 更 して 保 存 すること 3 [ 発 展 ] デジカメや 携 帯 で 撮 った 写 真 を 使 う デジカメや 携 帯 で 撮 った 画 像 は ファイルとして 扱 う パソコンにメモリー 媒 体 を 読 めるドライブがあれば コピーできる 最 近 は USBドライブに 接 続 可 能 なデジカメも 多 い - 201 -
第 5 部 コンピューターの 仕 組 み 4 新 しいページの 作 成 今 まで 学 んだタグを 使 って ウェブページを 作 成 してみよう 著 作 権 のある 写 真 やボタンを 使 わないように 注 意 しなさい HTML の 練 習 フォルダー( 先 に 作 った hello.html と 同 じフォル ダー)に ファイル 名 は school.html で 保 存 する 下 の HTML を 参 考 に 自 分 なりに 書 いてみよう 完 成 サンプルは 下 にある 先 頭 行 は<html>で 始 める 背 景 色 :ライトブルー<body bgcolor=lightblue> 挿 入 場 所 : 中 央 <p align=center> 文 字 のサイズと 色 :6 ブルー<font size=6 color=blue> 画 像 の 挿 入 ( 画 像 ファイルは image2.jpg): 中 央 に 配 置 <p align=center><img src="image2.jpg"></p> リンク:リンク 先 URL http://www.toyoeiwa.ac.jp <a href=http://www.toyoeiwa.ac.jp> 東 洋 英 和 女 学 院 </a> リンク:リンク 先 ファイル 名 hello.html <a href= hello.html > 戻 る</a> - 202 -
第 22 章 ウェブページの 作 成 2 5 サイトの 完 成 演 習 4が 完 成 すると 例 8と 演 習 4 のリンク 先 ページが 開 くようになる フォルダーとファイルの 関 係 をエクスプローラーで 見 ると 次 のように なっている 例 8と 演 習 4で 示 した 画 像 ファイルやリンクの 書 き 方 は 同 一 フォルダー (ここでは HTML の 練 習 フォルダー)に すべてのファイル(hello.html school.html image.jpg image2.jpg)を 置 く 場 合 である レポート ウェブページ 作 成 作 成 したファイルを 下 に 示 すレポート 提 出 フォルダーにコピー することにより 提 出 とする すべてのファイルを 提 出 すること 本 文 ( 拡 張 子 がhtml)の ファイルだけでなく 写 真 や 絵 ( 拡 張 子 がjpg)のファイルも 提 出 すること 提 出 先 フォルダーは 学 内 からしか 見 えません 学 外 から は 提 出 できません 提 出 期 限 :[ 月 日 ]の 授 業 時 間 内 ( 提 出 期 限 厳 守 ) 提 出 先 : 担 当 教 員 - 203 -
第 5 部 コンピューターの 仕 組 み レポート 提 出 方 法 提 出 先 フォルダーは 学 内 からしか 見 えません 学 外 からは 提 出 できません 1 エクスプローラー を 開 く 2 左 側 ナビゲーションウィンドウの ライブラリ ドキュメント MyDocuments] HTML の 練 習 を 選 択 右 側 ライブラリウィンドウにファ イルがあるか 確 認 する 3 左 側 ナビゲーションウィンドウの ライブラリ 共 用 フォルダー を 選 択 す る 4 右 側 ライブラリウィンドウの 基 礎 情 報 科 学 Ⅰ Ⅱ 履 修 時 間 と 担 当 の 先 生 と 選 択 し 自 分 の 学 籍 と 名 前 のフォルダーがあることを 確 認 5 左 側 ナビゲーションウィンドウの HTML の 練 習 フォルダーをドラッグし て 6 ドラッグの 最 中 に 学 籍 番 号 へコピー のメッセージが 出 ることを 確 認 し て 7 自 分 の 学 籍 番 号 と 名 前 のフォルダーに 合 わせ フォルダーが 選 択 され たことを 確 認 してからドロップする - 204 -