情 報 教 育 演 習 II 第 5 回 HTML(4) 前 回 に 引 き 続 き Webの 中 心 的 な 技 術 HTML について 実 習 をします 今 回 で HTMLのまとめ になります HTML(4) 1. 水 平 線 をつくる( 復 習 ) 2.イメージを 貼 り 付 ける 今 回 の 課 題 1.HTMLファイルを 作 成 する 2.HTMLファイルの 文 法 をチェックする - 1
水 平 線 をつくる( 復 習 ) 水 平 線 の 作 り 方 を もう 一 度 説 明 します 水 平 線 をつくる 水 平 線 ( 横 罫 線 )を 作 るには hr 要 素 を 使 います <hr> hr 要 素 を 入 れた 場 所 に 凹 凸 のある 水 平 線 をひきます 水 平 線 の 調 整 について( 注 意 ) hr 要 素 に size や width を 属 追 性 加 すると 線 の 太 さや 長 さも 設 定 できます ただし 次 回 から 学 習 する デザインを 設 定 するCSSでは 線 の 太 さや 長 さは CSSで 設 定 することが 推 奨 されています そのため 今 回 の 課 題 では これまでに 設 定 した 線 の 太 さや 長 さの 設 定 部 分 は 削 除 してもらうことになります <hrsize=" 太 さ"width=" 長 さ"> size 属 性 に 数 値 を 設 定 すると 線 の 太 さが 変 わります 単 位 は ピクセル ( 画 面 を 構 成 する 点 )です width 属 性 に 数 値 を 設 定 すると 線 の 長 さが 変 わります こちらも 単 位 は ピクセル です また 長 さに % を 設 定 すると ウィンドウの 横 幅 に 対 する 割 合 で 長 さが 設 定 されます HTMLとブラウザでの 表 示 例 <hr> <hrsize=" 10" > <hrsize=" 10"width=" 20" > <hrsize=" 10"width=" 80%" > 次 へ 進 んでください 2 - 水 平 線 をつくる( 復 習 )
イメージを 貼 り 付 ける イメージを 配 置 する イメージ( 画 像 データ)を 配 置 するには img 要 素 とalt 属 性 を 指 定 します また height width 属 性 で 画 像 の 高 さや 幅 も 指 定 できます <imgsrc=" 画 像 ファイルの 場 所 名 前 "alt=" 代 替 テキスト"> <imgsrc=" 画 像 ファイルの 場 所 名 前 "alt=" 代 替 テキスト"height=" 高 さ"width=" 幅 "> img 要 素 で 指 定 した 場 所 に 画 像 を 配 置 します alt 属 性 には 画 像 を 表 示 できない 環 境 で 画 像 のかわりに 表 示 させるテ キストを 設 定 します 画 像 の 内 容 を 説 明 するのではなく 画 像 によって 伝 えたい 内 容 を 設 定 します なお 画 像 が 意 味 のない 飾 りの 場 合 は alt="" と 指 定 します 画 像 の 高 さと 幅 は height 属 性 とwidth 属 性 で ピクセル 値 を 使 って 指 定 します どちらかだけの 指 定 もできます もし ピクセル 値 が 画 像 のサイズより 大 きい 場 合 は 画 像 が 拡 大 され ピクセル 値 が 画 像 のサイズより 小 さい 場 合 は 画 像 は 縮 小 さ れます <imgsrc=" logo.png "alt=" 兵 庫 大 学 情 報 メディアセンター"> ここから 先 の 内 容 は 今 学 習 している HTML4.01では 推 奨 されていない 方 法 です ただし 知 識 として 知 っておくと 便 利 なこともあるので 紹 介 だけしておきます 文 字 とイメージの 縦 位 置 を 調 整 する イメージの 位 置 を 調 整 するには align 属 性 を 指 定 します なお この 方 法 は 現 在 使 われているHTML4.01では 推 奨 されて いません <imgsrc=" 画 像 ファイルの 場 所 名 前 "alt=" 代 替 テキスト"aligh=" 位 置 "> 同 じ 行 の 文 字 に 対 して 画 像 を 表 示 する 位 置 を 設 定 できます 次 のような 設 定 ができます top: 画 像 の 上 側 と 文 字 の 上 側 を 揃 える middle: 画 像 の 中 心 と 文 字 の 下 側 を 揃 える bottom: 画 像 の 下 側 と 文 字 の 下 側 を 揃 える ページ 全 体 の 背 景 イメージを 設 定 する ページ 全 体 の 背 景 イメージを 設 定 するには body 要 素 background に 属 性 を 指 定 します なお この 方 法 は 現 在 使 われて いるHTML4.01では 推 奨 されていません <body background=" 画 像 ファイルの 場 所 位 置 "> </body> - 3
画 像 データの 利 用 画 像 のフォーマット Webページ 上 で 扱 うことができる 画 像 データのフォーマット( 形 式 )には 次 のものがあります GIF: Graphics Interchange Format (*.gif) アイコン バナー 向 き( 最 大 で256 色 しか 扱 えない) 透 過 GIFやアニメーションGIFなど 機 能 が 豊 富 PNG: Portable Network Graphics (*.png) GIFファイルに 代 わる 次 世 代 のフォーマット(フルカラーが 扱 える) 古 いブラウザでは 扱 えない 場 合 がある JPEG: Joint Photographic Experts Group (*.jpg, *.jpeg) 写 真 イラスト 向 き(フルカラーが 扱 える) ファイルサイズが 小 さい( 圧 縮 率 を 変 える) その 他 に Web 上 では 扱 えないが パソコンで 一 般 的 に 扱 われるフォーマットには 次 のものがあります Web 上 で 扱 うに は 画 像 を 変 換 する 必 要 があります BMP: Bitmap (*.bmp) 素 材 集 の 利 用 Windows 標 準 の 画 像 フォーマット( ペイント で 作 成 できる) ファイルサイズが 大 きい(24ビットカラーの 場 合 ) Webページでは 使 えないので ほかの 形 式 に 変 換 する 必 要 がある インターネットに 公 開 されている 素 材 集 サイト にアクセスして アイコンの 素 材 を 集 めます ただし 素 材 集 サイト を 利 用 するときには 利 用 に 関 する 注 意 事 項 を 確 認 しましょう 著 作 権 フリー のように 再 利 用 が 許 可 されているかどう か 注 意 しましょう 1.Yahoo! JAPAN( http://www.yahoo.co.jp/ )にアクセス 2. コンピュータとインターネット >インターネット>ホームページ ウェブサイト>ホームページ 作 成 >グラフィックス 素 の 材 順 に カテゴリを 絞 り 込 む 3. 登 録 されているサイトにアクセスし 画 像 ファイルを 探 す 4. 気 に 入 った 画 像 があったら 画 像 を 右 クリックする a.メニューから 名 前 をつけて 画 像 を 保 存 を 選 ぶ b.ファイルの 保 存 場 所 を 指 定 して 保 存 ボタンをクリック 著 作 権 ( 再 掲 追 加 ) 著 作 権 とは 著 作 物 ( 人 が 創 造 したもの)に 対 して 著 作 者 ( 著 作 物 を 創 造 した 人 )が 持 つ 権 利 です 原 則 と して 著 作 者 の 了 解 なしに 著 作 物 を 複 製 したり 販 売 したりしてはいけません 著 作 物 とは?( 一 部 ) 文 章 : 小 説 脚 本 論 文 講 演 音 楽 : 歌 詞 楽 曲 舞 踏 美 術 : 絵 画 彫 刻 写 真 映 画 情 報 :Webページ コンピュータのプログラム 著 作 権 はいつ 発 生 する? 特 別 な 手 続 きは 必 要 なし( 創 作 した 時 点 で 自 動 的 に 発 生 ) 著 作 者 の 死 後 50 年 後 まで 有 効 4 - イメージを 貼 り 付 ける
参 考 リンク とほほの 著 作 権 入 門 しゅんしゅんの 著 作 権 講 座 次 へ 進 んでください - 5
課 題 : ネット 上 の 記 事 へのコメントのWebページを 作 成 する 前 回 と 同 様 に HTMLファイルを 作 成 していきます HTMLファイルの 内 インターネット 容 は 上 のあらゆる 記 事 へのコメント とします 1. インターネット 上 の 記 事 にコメントをする (1) 情 報 を 集 める 自 分 が 現 在 興 味 のあるテーマについて インターネットからニュース 等 を 探 して 自 分 が 興 味 を 持 った 記 事 を1つ 集 めなさ い (2) 情 報 にコメントをつける 記 事 を 探 したら 次 の 順 にコメントを 作 りなさい なお 文 字 数 は 200 文 字 以 としますが 上 内 容 はささいなことで かまいません やり 方 は 第 3 回 の 課 題 と 同 じです 第 3 回 の 課 題 の 説 明 を 見 てください 2. HTMLファイルの 作 成 第 4 回 の 課 題 で 作 成 したファイルをもとに 今 回 の 課 題 を 作 成 します (1) ファイルのコピー 第 4 回 の 課 題 のファイルをコピーして 新 しいファイルを 作 ってください ファイルには 次 のようなファイル 名 をつけてくださ い 0518 + 学 籍 番 号 +.html ( 半 角 文 字 で!) ( 学 籍 番 号 がC2092000の 場 合 ファイル 0518c2092000.html ) 名 は (2) HTMLのレイアウト 作 成 するページのレイアウトは 下 の 図 を 参 考 にしてください また 作 成 するときには 第 4 回 の 課 題 での 注 意 点 を 参 考 に 今 回 分 のコメントと 目 次 へのリンクを 作 成 します ページのレイアウトの 例 ページのタイトル 目 次 第 5 回 のコメントへのリンク 第 4 回 のコメントへのリンク 第 3 回 のコメントへのリンク 第 2 回 のコメントへのリンク プロフィール --- 第 5 回 の 課 題 のコメント [トップへ 戻 る] 第 4 回 の 課 題 のコメント [トップへ 戻 る] 6 - 課 題 : ネット 上 の 記 事 へのコメントのWebページを 作 成 する
第 3 回 の 課 題 のコメント [トップへ 戻 る] 第 2 回 の 課 題 のコメント [トップへ 戻 る] プロフィール [トップへ 戻 る] --- 連 絡 先 著 作 権 の 情 報 (3) プロフィールへの 画 像 の 追 加 プロフィール( 自 己 紹 介 )のところに 自 画 像 や 自 分 の 好 きなものなどの プロフィール 用 の 画 像 を 作 成 してもらいま す Windows 付 ペイント を 属 の 使 って 描 きます 1. スタート ボタンをクリックして プログラム アクセサリ ペイント の 順 に 選 択 2. ペイント が 起 動 したら メニューから 変 形 キャンバスの 色 とサイズ を 選 択 3. 幅 (W) を 100 高 さ(H) を 100 に 設 定 4. OK ボタンをクリック ペイントの 機 能 を 活 用 して 自 由 に 自 分 のプロフィール 画 像 を 描 いてください 描 けたら 次 のようにして 保 存 してくだ さい 1.メニューから ファイル 名 前 をつけて 保 存 を 選 択 2.ファイルを 保 存 する 場 所 を マイドキュメント に 選 択 3. ファイルの 種 類 を PNG (*.PNG) に 設 定 4.ファイル 名 に profile.png を 設 定 ( 半 角 文 字 で!) 5. 保 存 ボタンをクリック 最 後 に 次 のように 見 出 しを 設 定 したり プロフィール 用 の 画 像 を 貼 り 付 けてください プロフィール の 見 出 しの 下 に h3 要 素 で イメージ という 見 出 しを 書 く 今 回 学 習 したimage を 要 使 素 って 作 成 したプロフィール 用 の 画 像 を 貼 り 付 ける 最 後 の 10の 質 問 の 前 に h3 要 素 で 自 己 紹 介 という 見 出 しを 書 く プロフィール 部 分 の 例 プロフィール イメージ - 7
自 己 紹 介 への10の 質 問 質 問 1 回 1 答 質 問 2 回 2 答 質 問 9 回 9 答 質 問 10 回 10 答 (4) HTMLファイルの 作 成 第 3 回 から 今 回 までに 説 明 した HTMLの 技 術 を 使 って 自 分 のコメントからHTMLファイルを 作 成 してください 注 意 点 は 次 のとおりです 情 報 源 へのURLは その 情 報 源 にアクセスできるようにリンクにすること 第 3 回 の 課 題 で 説 明 した 注 意 点 を 守 る ページの 中 に 書 いた すべてのhr 要 素 の 属 性 (width,size)を 削 除 する 例 : <hrsize="80%"> < 訂 正 後 > <hr> ファイルの 最 後 にある 連 絡 先 の 更 新 日 の 日 付 を 更 新 する <address> 作 成 日 :2010-04-20; 更 新 日 :2010-05-18 <br> Copyright (C)2010 兵 庫 太 郎,Allrights reserved.<br> このページに 関 する 問 合 せ 先 :<br> E-Mail. <ahref="mailto:c2092000@ed.hyogo-dai.ac.jp">c2092000@ </address> まだ 提 出 ではありません 次 へに 進 んで 課 題 を 行 ってください 8 - 課 題 : ネット 上 の 記 事 へのコメントのWebページを 作 成 する
課 題 (2) HTMLファイルの 文 法 をチェックする 作 成 したHTMLファイルの HTMLの 文 法 が 正 しいかを 次 のサイトにアクセスして チェックしてください Another HTML-lint gateway (http://openlab.ring.gr.jp/k16/htmllint/htmllin ) チェックは 次 のような 方 法 で 行 ってください 1.http://openlab.ring.gr.jp/k16/htmllint/htmllintl.html へアクセス 2. FILE のチェックボックスをクリック 3. 参 照 ボタンをクリック 4.ファイルの 選 択 画 面 になるので 作 成 したファイルを 選 択 し 開 く ボタンをクリック 5. チェック ボタンをクリック 6.チェック 結 果 が 表 示 チェック 結 果 が よくできました となるまで 文 法 の 間 違 いを 修 正 して チェックを 繰 り 返 してください よくできました となったら 課 題 のファイルを 提 出 してください - 9
提 出 方 法 作 成 したファイルを 次 の 場 所 にコピーして 提 出 してください マイコンピュータ Fsの 資 料 課 題 kawano 提 出 提 出 期 限 原 則 として 平 成 22 年 5 月 25 日 までとします 9 時 期 限 以 後 は 特 別 な 理 由 がない 限 り 提 出 を 受 け 付 けません 課 題 のやりなおしは 提 出 期 限 まで 受 け 付 けます 10 - 課 題 (2) HTMLファイルの 文 法 をチェックする